1. 程式人生 > >單行,多行文本省略號

單行,多行文本省略號

範圍 ips cal 彈性 clam nowrap 組合 屬性 盒子模型

單行文本省略號
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本省略號

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

適用範圍:

因使用了WebKit的CSS擴展屬性,該方法適用於WebKit瀏覽器及移動端;

註:

-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果,它需要組合其他的WebKit屬性。常見結合屬性:

display: -webkit-box; 必須結合的屬性 ,將對象作為彈性伸縮盒子模型顯示 。

-webkit-box-orient 必須結合的屬性 ,設置或檢索伸縮盒對象的子元素的排列方式

單行,多行文本省略號