CSS3 文字多行省略號是在CSS3中新增的一種文本樣式,它可以讓長文本在固定大小的文本容器中顯示,并將超出容器范圍的文本省略號表示。
.text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 顯示行數 */ overflow: hidden; text-overflow: ellipsis; /* 顯示省略號 */ }
上面的代碼定義了一個class為text的文本容器,display
屬性指定容器元素為彈性盒子,并且在垂直方向上排列,-webkit-line-clamp
屬性指定了顯示文本的行數,最多只顯示3行。
如果文本超出了3行,overflow
屬性將會觸發文本的裁剪,text-overflow
屬性將省略號添加到最后一行文本的結尾處,以示省略。
使用CSS3 文字多行省略號可以優化長文本在移動設備上的閱讀體驗,防止大段的文本影響頁面的美觀性。
上一篇css3 改變圖片大小
下一篇css3 教學課件