CSS中可以使用text-overflow屬性實(shí)現(xiàn)文本超出部分顯示省略號(hào)的效果。當(dāng)一個(gè)元素的文本內(nèi)容超出了其容器的寬度或高度時(shí)，text-overflow屬性可以控制文本的顯示方式。
實(shí)現(xiàn)步驟如下：
1. 設(shè)置文本溢出隱藏
我們需要使用CSS中的overflow屬性將文本內(nèi)容超出容器的部分進(jìn)行隱藏。
div {
width: 150px;
overflow: hidden;
}
2. 顯示省略號(hào)
使用text-overflow屬性控制文本超出部分的顯示方式，常在該屬性與white-space和overflow屬性一起使用。這三個(gè)屬性的順序必須為：
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
其中，white-space屬性用于設(shè)置文本不換行，overflow屬性用于設(shè)置文本溢出隱藏，text-overflow屬性用于設(shè)置超出部分以省略號(hào)表示。
完整示例代碼：
<div>
I am text that is too long to fit in this container and will be truncated.
</div>
<style>
div {
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
效果如下：
I am text that is too...
京公網(wǎng)安備 11010802030320號(hào)