2202月
【教學文章】CSS多行文本溢出省略顯示
文本溢出我們經常用到的應該就是text-overflow:ellipsis了,相信大家也很熟悉,但是對於多行文本的溢出處理確接觸的不是很多,最近在公司群裡面有同事問到,並且自己也遇到過這個問題,所以專門研究過這個問題。
首先我們回顧一下以前實現單行縮略是可以通過下面的代碼實現的(部分瀏覽器需要設置寬度):
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
效果如下:
WebKit內核瀏覽器解決辦法
首先,WebKit内核的浏览器实现起来比较简单,可以通过添加一个-webkit-line-clamp的私有属性来实现,-webkit-line-clamp是用来限制在一个块元素显示的文本的行数。 为了实现这个效果,它需要组合其他的WebKit属性:
- display: -webkit-box 將對像作為彈性伸縮盒子模型顯示;
- -webkit-box-orient 設置或檢索伸縮盒對象的子元素的排列方式;
- text-overflow: ellipsis 用省略號“…”隱藏超出範圍的文本。
具體代碼參考如下:
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
其他瀏覽器的解決方案
目前沒有什麼CSS的屬性可以直接控制多行文本的省略顯示,比較靠譜的辦法應該就是利用相對定位在最後面加上一個省略號了,代碼可以參考下面:
p { position:relative; line-height:1.5em; /* 高度為需要顯示的行數*行高,比如這裡我們顯示兩行,則為3 */ height:3em; overflow:hidden; } p:after { content:"..."; position:absolute; bottom:0; right:0; padding: 0 5px; background-color: #fff; }
不過這樣會有一點問題:
- 需要知道顯示的行數並設置行高才行;
- IE6/7不支持after和content,需要添加一個標籤來代替;
- 省略號的背景顏色跟文本背景顏色一樣,並且可能會遮住部分文字,建議可以使用漸變的png背景圖片代替。
文章來源:LOMU