CSS中隱藏一行多余的文本,可以利用text-overflow
和white-space
兩個屬性來實現。
首先利用text-overflow
設置文本溢出時的表現形式。如果想用省略號來代替溢出的文本,可以用text-overflow:ellipsis
,另外還有兩個值可選:clip
和fade
。
然后利用white-space
來控制文本是否換行。如果希望強制文本不換行,可以用white-space:nowrap
。
.text-overflow { width: 200px; /* 寬度必須設定才能實現文本溢出 */ overflow: hidden; /* 溢出部分隱藏 */ text-overflow: ellipsis; /* 溢出使用省略號代替 */ white-space: nowrap; /* 強制文本不換行 */ }
上面的代碼可以實現單行文本的隱藏。如果想要隱藏多行文本,可以結合利用overflow
和display
等屬性來實現。
上一篇css中間縮放
下一篇css中限制文字數量