文字超出內容區域後用三個省略號代替

當div的寬高被固定了， 我們只需要給它加三個屬性： 

overflow:hidden;    //(超出部分隱藏)

white-space:nowrap;   //(強制不換行） 
text-overflow:ellipsis;   // （用三個省略號代替）

就需要用到下面這種辦法了

我們需要給div設定4個屬性：

display: -webkit-box;

-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

display: -webkit-box;  // (box-flex布局)

-webkit-box-orient: vertical; // (垂直排列子元素) 
-webkit-line-clamp: n; // (n>0) （顯示幾行） 
overflow: hidden; //（超出部分隱藏）

另外 同級的dom不能設定padding-bottom屬性，否則還是會看到超過 n 行的文字。如果需要設定padding，可以在外層再套一層 div 或者 用偽類來控制內間距。

還有乙個細節問題，也是工作中遇到的。

在超出設定的 n 行 和 正常顯示（不超出的情況）顯示的時候 內容最後一行的間距減少了。為了統一間距，目前解決的辦法是通過js控制下。產品就要糾結這個間距，真沒辦法，所以只有想辦法處理咯。

function

fixlineclamp(doms, marginbottom)
}fixlineclamp(document.queryselector('.detail-empty'), '6px')

function

fixlineclamp(doms, marginbottom)
})}fixlineclamp(document.queryselectorall('.itemlist .content'), '8px')

文字內容超出顯示省略號

display webkit box webkit box orient vertical webkit line clamp 3 overflow hidden webkit line clamp用來限制在乙個塊元素顯示的文字的行數。為了實現該效果，它需要組合其他的webkit屬性。常見結合屬性 ...

內容超出顯示省略號

一 單行文字 如果實現單行文字的溢位顯示省略號都知道用text overflow ellipsis屬性來，當然還需要加寬度width屬來相容部分瀏覽。實現方法 overflow hidden text overflow ellipsis white space nowrap 這個屬性只支援單行文字的...

CSS控制文字超出指定寬度後用省略號代替

一般的文字截斷 適用於內聯與塊 text overflow 對於 文字溢位的定義 對於 超出範圍顯示省略號 tabletd 需要你注意的是，這個css樣式只對單行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。這個寫法只有ie會有 其它的瀏覽器文字超出指定寬度時會隱藏。以上問題可以解決 使...