CSS3 文字溢位

CSS3 新文字屬性提供了對文字呈現的更多控制。

處理 CSS3 中的文字溢位

CSS3 引入了幾個用於修改文字內容的新屬性，但是其中一些屬性很長時間都存在。這些屬性使你可以精確控制 Web 瀏覽器上的文字呈現。

隱藏溢位文字

當文字設定為 nowrap 時，文字可能會溢位，例如，如果 white-space 屬性的值設定為 nowrap 包含元素，或者單個單詞太長而不適合長電子郵件地址。在這種情況下，你可以使用 CSS3 text-overflow 屬性來確定溢位的文字內容的顯示方式。

你可以顯示或剪輯溢位的文字或剪輯，並在剪下文字的位置中顯示省略號或自定義字串以來指示使用者。

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 */
}

警告： 大多數 Web 瀏覽器都不支援 text-overflow 屬性的 string 值，你應該更好地避免這種情況。

斷開溢位文字

你還可以使用 CSS3 word-wrap 屬性來斷開一個長字並強制它換行溢位包含元素邊界的新行。

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

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

提示： 請檢視所有可能值的各個屬性參考以及這些 CSS 屬性的瀏覽器支援。

指定斷字規則

你還可以使用 CSS3 word-break 屬性自行指定文字的換行規則（即如何在單詞中斷行）。

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;
}