CSS中可以使用text-overflow屬性來實現(xiàn)超過范圍自動省略的功能,該屬性指定了當(dāng)文本溢出其包含塊時發(fā)生的事情,它可以指定文本應(yīng)該溢出到下一行,或者應(yīng)該被省略。
text-overflow屬性有三個值可選:
1、clip:文本會被裁剪,顯示省略號(...),這是默認(rèn)值。
2、ellipsis:文本會被裁剪,顯示省略號(...),與clip不同,ellipsis會保留文本的原始樣式。
3、string:文本會被裁剪,顯示指定的字符串,你可以指定顯示“更多”或“查看更多”。
使用text-overflow屬性時,還需要配合其他CSS屬性來實現(xiàn)自動省略的效果,需要指定文本的寬度和高度,以及設(shè)置overflow屬性為hidden。
下面是一個示例代碼:
div { width: 100px; height: 20px; text-overflow: ellipsis; overflow: hidden; }
在這個示例中,如果div中的文本超過100px的寬度,它將被裁剪并顯示省略號(...),由于設(shè)置了overflow屬性為hidden,文本不會溢出到下一行。