今天要介紹的是CSS中的text-overflow屬性。這個屬性可以用來控制文本溢出時的顯示方式。

/* 在單行顯示不下時，用省略號表示溢出的部分 */
text-overflow: ellipsis;

這個屬性只在一些特定的情況下才會生效，需要滿足以下條件：

• 元素必須有固定的寬度，否則無法確定什么時候應該溢出
• 元素的overflow屬性必須是hidden或scroll，否則溢出的文本會被顯示出來
• 元素必須是一個塊狀元素，并且不能有浮動

下面是一個例子：

<style>
.truncate {
white-space: nowrap; /* 強制在一行中顯示 */
width: 100px; /* 固定寬度 */
overflow: hidden; /* 隱藏溢出的內容 */
text-overflow: ellipsis; /* 使用省略號表示溢出的部分 */
}
</style>
<div class="truncate">這是一個比較長的文本，會被截斷顯示...</div>

上面的例子中，文本會被限制在100px的寬度內，如果顯示不下，就會用省略號代替溢出的部分。