單行一般加這個三個屬性即可
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行需加下面屬性
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow:hidden;
text-overflow: ellipsis;
這裡用了乙個不是很常見的屬性 -webkit-line-clamp
-webkit-line-clamp用來限制在乙個塊元素顯示的文字的行數。 為了實現該效果，它需要組合其他的webkit屬性。
常見結合屬性：
1，display: -webkit-box;必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。
2，-webkit-box-orient必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。
3，text-overflow: ellipsis;，可以用來多行文字的情況下，用省略號「…」隱藏超出範圍的文字 。
實現單行 多行文字溢位顯示省略號
單行溢位,顯示省略號，用text overflow屬性，需要增加寬度 溢位隱藏 overflow hidden 隱藏的部分用.表示 text overflow ellipsis 文字不能轉行 white space nowrap width 244px 用text overflow ellipsis...
單行 多行文字溢位隱藏顯示省略號
classname classname 其中多行文字中，因為我們使用了webkit的擴充套件屬性，該方法適用於核心為webkit的瀏覽器 注意 webkit line clamp是用來限制乙個塊元素顯示的文字行數。為了實現對應的效果，它需要結合其他的webkit屬性。常見的有 1 display w...
CSS 單行 多行文字溢位顯示省略號
單行文字 overflow hidden text overflow ellipsis white space nowrap 多行文字溢位顯示省略號 css 單行 多行文字溢位顯示省略號css 單行 多行文字溢位顯示省略號css 單行 多行文字溢位顯示省略號css 單行 多行文字溢位顯示省略號css...