CSS3 文本溢出(Text Overflow)

CSS3的新文本屬性可提供對文本呈現(xiàn)的更多指定。

在CSS3中處理文本溢出

CSS3引入了幾個新的屬性屬性來修改文本內(nèi)容，但是其中一些屬性已經(jīng)存在很長時間了。這些屬性使您可以精確指定Web瀏覽器上文本的呈現(xiàn)。

隱藏溢出文本

例如，如果將空白元素的white-space屬性值設(shè)置為nowrap，或者單個單詞太長而無法容納較長的電子郵件地址，則可能會導(dǎo)致文本溢出（例如，將其禁止換行）。 在這種情況下，可以使用CSS3 text-overflow屬性來確定溢出文本內(nèi)容的顯示方式。

您可以顯示或剪切溢出的文本，也可以剪切并在剪切文本的palace中顯示省略號或自定義字符串，以指示用戶。

該word-break屬性接受的值為：clip、 ellipsis、string。

p {
    width: 400px;
    overflow: hidden;
    white-space: nowrap;
    background: #cdcdcd;
}
p.clipped {
    text-overflow: clip; /* clipped the overflowed text */
}
p.ellipses {
    text-overflow: ellipsis; /* display '…' to represent clipped text */
}

中斷溢出文本

您還可以使用CSS3 word-wrap屬性將一個長單詞打斷，并使其換行，以使包含元素的邊界溢出。

該word-wrap屬性接受的值為：normal和break-word。

p {
    width: 200px;
    background: #ffc4ff;
    word-wrap: break-word;
}

指定文本換行規(guī)則

您還可以使用CSS3 word-break屬性自行指定文本的換行規(guī)則（即，如何在單詞中換行）。

通過可接受的值word-break屬性是：normal，break-all和keep-all。

p {
    width: 150px;
    padding: 10px;
}
p.break {
    background: #bedb8b;
    word-break: break-all;
}
p.keep {
    background: #f09bbb;
    word-break: keep-all;
}