CSS3提供了很多新特性，其中一個(gè)非常實(shí)用的就是省略號(hào)特效。在常規(guī)情況下，當(dāng)文字內(nèi)容超出了指定的寬度時(shí)就會(huì)自動(dòng)換行。但如果希望將超出的文字用省略號(hào)替代，可以使用CSS3的text-overflow屬性。

.text{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

上述代碼設(shè)置了一個(gè)寬度為200px的容器，將文本內(nèi)容的換行方式設(shè)為不換行（nowrap），超出部分隱藏（overflow: hidden），并且使用省略號(hào)替代（text-overflow: ellipsis）。這樣，超出部分就會(huì)以省略號(hào)的形式在文本末尾顯示。

但上述代碼只能實(shí)現(xiàn)一行省略號(hào)效果，如果需要兩行或者更多行的省略號(hào)，可以再加上一個(gè)line-clamp屬性，如下：

.text{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}

上述代碼使用了display屬性的-webkit-box值，將容器設(shè)置為一個(gè)彈性伸縮盒子，并用-webkit-box-orient屬性指定為垂直方向。然后用-webkit-line-clamp屬性設(shè)置容器最多顯示2行，超過的部分隱藏，最后同樣使用text-overflow屬性將省略號(hào)顯示出來。

需要注意的是，line-clamp目前只在webkit瀏覽器中支持，其他瀏覽器需要通過-webkit-box-orient和display:-webkit-box屬性一起使用來實(shí)現(xiàn)類似的效果。