CSS中有一個(gè)很實(shí)用的樣式屬性，可以用來(lái)設(shè)置文字超出容器的部分用省略號(hào)（...）代替，從而使網(wǎng)頁(yè)排版更加美觀。這個(gè)屬性就是text-overflow。

使用text-overflow屬性需要先設(shè)置容器的寬度和高度，并使溢出的部分隱藏，這可以通過(guò)設(shè)置overflow屬性來(lái)實(shí)現(xiàn)，具體代碼如下：

.container{
width: 150px; /* 容器寬度 */
height: 20px; /* 容器高度 */
overflow: hidden; /* 隱藏溢出的內(nèi)容 */
}

接著，我們就可以在容器中添加文字，并使用text-overflow屬性來(lái)設(shè)置省略號(hào)：

.container p{
white-space: nowrap; /* 防止文字換行 */
text-overflow: ellipsis; /* 設(shè)置省略號(hào) */
overflow: hidden; /* 必須和容器的overflow屬性相同 */
}

其中，text-overflow屬性有三個(gè)可選值：

• clip：默認(rèn)值，表示裁剪文本
• ellipsis：用省略號(hào)代替溢出的文本
• string：用自定義字符串代替溢出的文本，需要在text-overflow后加上content屬性，如下：

.container p{
white-space: nowrap;
text-overflow: string;
overflow: hidden;
content: "......";
}

使用text-overflow屬性可以讓網(wǎng)頁(yè)排版更加美觀，但需要注意的是，這個(gè)屬性只對(duì)單行文本有效，如果需要對(duì)多行文本使用省略號(hào)，可以使用JavaScript或CSS3的新屬性line-clamp。