在CSS中,可以使用text-overflow屬性來在文字后面添加省略號,這個屬性指定了當(dāng)文本溢出其包含元素的寬度時,應(yīng)該顯示省略號而不是溢出,以下是一些示例代碼,展示如何在CSS中使用text-overflow屬性來添加省略號:
1、定義一個帶有省略號的樣式類:
.ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
2、應(yīng)用樣式類到HTML元素上:
<div class="ellipsis">這是一段很長的文本,它將會溢出容器的寬度,但由于應(yīng)用了text-overflow: ellipsis樣式,所以會在溢出部分顯示省略號。</div>
在這個示例中,當(dāng)文本長度超過div元素的寬度時,文本將在溢出部分顯示省略號,注意,為了使text-overflow屬性正常工作,還需要設(shè)置white-space: nowrap和overflow: hidden屬性。
如果你想要在文本的中間位置添加省略號,可以使用title屬性來實現(xiàn):
<div title="這是一段很長的文本,它將會溢出容器的寬度,但由于應(yīng)用了text-overflow: ellipsis樣式,所以會在溢出部分顯示省略號。">這是一段很長的文本,它將會溢出容器的寬度,但由于應(yīng)用了text-overflow: ellipsis樣式,所以會在溢出部分顯示省略號。</div>
在這個示例中,當(dāng)鼠標懸停在div元素上時,會顯示完整的文本內(nèi)容,如果不懸停,則只會顯示文本的開頭和結(jié)尾部分,中間用省略號表示。