在網(wǎng)頁(yè)中，我們有時(shí)需要將一段文字限定在一定大小的區(qū)域內(nèi)，這時(shí)候就有可能出現(xiàn)文字溢出的情況，造成排版不美觀的問(wèn)題。為了解決這一問(wèn)題，CSS 提供了一個(gè)屬性來(lái)控制文字溢出時(shí)的顯示情況，即text-overflow。

在實(shí)際應(yīng)用中，我們通常會(huì)將text-overflow屬性與white-space屬性和overflow屬性一起使用。其中，white-space用來(lái)控制文字是否換行，overflow用來(lái)控制文字溢出時(shí)的行為。

.example {
width: 100px; /* 設(shè)定溢出容器的寬度 */
white-space: nowrap; /* 禁止換行 */
overflow: hidden; /* 超出容器時(shí)隱藏溢出部分 */
text-overflow: ellipsis; /* 顯示省略號(hào) */
}

上述代碼中，text-overflow屬性的值為ellipsis，表示溢出部分以省略號(hào)（三個(gè)點(diǎn)）的方式顯示。如果不需要省略號(hào)，可以將其設(shè)置為clip，表示裁剪超出部分。

text-overflow屬性只適用于單行文本，如果要處理多行文本溢出的情況，可以考慮使用display屬性的box-orient值來(lái)設(shè)置溢出時(shí)的行為。具體實(shí)現(xiàn)可以見(jiàn)以下代碼：

.example {
width: 100px;
height: 50px; /* 設(shè)定溢出容器的高度 */
display: -webkit-box; /* 使用box模型 */
-webkit-box-orient: vertical; /* 豎向排列 */
overflow: hidden;
text-overflow: ellipsis;
}

上述代碼中，display屬性設(shè)置為-webkit-box，并通過(guò)-webkit-box-orient屬性將溢出容器內(nèi)內(nèi)容豎向排列，以處理多行文本溢出的情況。這里需要注意，-webkit-box屬性目前只在 Webkit 內(nèi)核的瀏覽器中被支持。

通過(guò)使用text-overflow屬性，我們可以輕松地控制網(wǎng)頁(yè)中文字的溢出顯示，達(dá)到最佳的顯示效果。