css H5端多行文本实现省略号
生活随笔
收集整理的這篇文章主要介紹了
css H5端多行文本实现省略号
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 這是改變 行數的
-webkit-box-orient: vertical;
-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果,它需要組合其他的WebKit屬性。
常見結合屬性:
display: -webkit-box; 必須結合的屬性 ,將對象作為彈性伸縮盒子模型顯示 。
-webkit-box-orient 必須結合的屬性 ,設置或檢索伸縮盒對象的子元素的排列方式 。
text-overflow: ellipsis;,可以用來多行文本的情況下,用省略號“…”隱藏超出范圍的文本 。
總結
以上是生活随笔為你收集整理的css H5端多行文本实现省略号的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: C# 之 static的用法详解
- 下一篇: base 镜像 - 每天5分钟玩转容器技