CSS中可以使用text-overflow屬性實現(xiàn)文本超出部分顯示省略號的效果。當一個元素的文本內(nèi)容超出了其容器的寬度或高度時，text-overflow屬性可以控制文本的顯示方式。
實現(xiàn)步驟如下：
1. 設(shè)置文本溢出隱藏
我們需要使用CSS中的overflow屬性將文本內(nèi)容超出容器的部分進行隱藏。
div {
width: 150px;
overflow: hidden;
}
2. 顯示省略號
使用text-overflow屬性控制文本超出部分的顯示方式，常在該屬性與white-space和overflow屬性一起使用。這三個屬性的順序必須為：
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
其中，white-space屬性用于設(shè)置文本不換行，overflow屬性用于設(shè)置文本溢出隱藏，text-overflow屬性用于設(shè)置超出部分以省略號表示。
完整示例代碼：
<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號