CSS中,可以使用text-overflow屬性來實現2行顯示省略號。該屬性結合了white-space和overflow屬性,確保文本在指定的寬度內呈現,并使用省略號表示未顯示的文本部分。
.text { width: 200px; white-space: pre-line; /*允許換行*/ overflow: hidden; text-overflow: ellipsis; /*省略號*/ display: -webkit-box; -webkit-box-orient: vertical; /*行向垂直排列*/ -webkit-line-clamp: 2; /*限制2行*/ }
其中,-webkit-box和-webkit-box-orient屬性用于使文本縱向排列,-webkit-line-clamp屬性用于限制文本行數。
需要注意的是,text-overflow屬性只在一行文本中顯示省略號時受支持。在多行文本中,可以使用display屬性的-webkit-box值使文本在垂直方向上排列,然后限制行數來顯示省略號。
上一篇css彈窗內容顯示不全
下一篇css 3 calc