長沙WEB前端培訓講解：WEB前端多行文字溢位問題

       很多人在前端開發過程中可能會遇到需要將多行文字溢位部分隱藏並替換為省略號的情況，這裡 就來給大家介紹一下解決方案。

單行文字溢位及省略

眾所周知，在CSS3中單行文字省略一般使用text-overflow實現：

text-overflow:ellipsis;

此屬性僅當文字溢位時是顯示省略標記，並不具備其它的樣式屬性定義，要實現溢位時產生省略號的效果還需定義以下屬性：

容器寬度: width：value;

強制文字在一行內顯示: white-space：nowrap;

溢位內容為隱藏： overflow：hidden;

溢位文字顯示省略號： text-overflow：ellipsis;

可惜這個屬性只支援單行文字溢位顯示省略號，並不支援多行文字。

多行文字溢位省略的幾種方法

對於WebKit核心的瀏覽器，特別是移動端

WebKit的一個CSS擴充套件屬性可以限制在一個塊元素中顯示的文字的行數，它是一個不規範的屬性（unsupported WebKit property），沒有出現在CSS規範草案中。

-webkit-line-clamp:value;

該屬性實現溢位省略效果還需要結合其他的屬性：

display: -webkit-box;

必須結合的屬性，將物件作為彈性伸縮盒子模型顯示

-webkit-box-orient:vertical;

必須結合的屬性，設定或檢索伸縮盒物件的子元素的排列方式

此時便可以結合

text-overflow:ellipsis;

實現多行文字省略。

相容寫法

把包含省略號的元素的定位在最後一行上，也能實現一個多行文字省略，沒有花裡胡哨的東西，只要調得準，基本可以相容大部分瀏覽器，說的就是IE。

div p{

font-size:20px;

font-weight: 900;

color: crimson;

position:relative;

line-height:20px;

height:60px;

overflow:hidden;

}

div p::after {

width: 20px;

content:"...";

font-weight:bold;

position:absolute;

bottom:0;

right:-4px;

background:antiquewhite;

}