CSS中有一個屬性叫做text-overflow,可以用于控制文本溢出時的處理方式。該屬性主要用于當文本超出容器的寬度或高度時,如何展示溢出的內容。
.overflow { width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
以上代碼樣式設置了一個寬度為80px的容器,使用了white-space屬性來防止文本繞行,overflow屬性使用hidden來隱藏溢出文本,最后使用text-overflow屬性的ellipsis值來將多余的字符顯示為省略號。
除了ellipsis值外,text-overflow屬性還有clip和string兩個值。clip表示修剪溢出文本并隱藏,string則表示在溢出文本的末尾顯示自定義的字符串。例如:
.clip { width: 80px; white-space: nowrap; overflow: hidden; text-overflow: clip; } .string { width: 80px; white-space: nowrap; overflow: hidden; text-overflow: " ..."; }
上面的.clip樣式將使用clip值來隱藏溢出的文本,而.string樣式將在文本結尾處顯示省略號加上三個點號。
需要注意的是,text-overflow只對單行文本有效,對于多行文本則需要使用其他的技術來控制溢出,例如使用CSS3的text-overflow屬性。