1.為當前的text文字加上以下樣式即可
display:-webkit-box; // 最關鍵的因素
-webkit-line-clamp:1; //多少行顯示省略號，預設為1，根據實際填寫
overflow:hidden; //文字超出隱藏
text-overflow:ellipsis; //文字超出顯示省略號
-webkit-box-orient:vertical; //未知
word-break:break-all; //未知
2.有時會出現第二行元素偶爾沒有遮擋完的情況，調整行高，設定line-height就可以了。
CSS文字超出顯示省略號
white space nowrap overflow hidden text overflow ellipsis 但是因為兩個行內元素例如span一起的時候會出現一些間距，為了去掉這些間距我們可以給元素新增font size 0 但這樣做的話，會發現省略號消失了，但不新增font size 0 又...
文字內容超出顯示省略號
display webkit box webkit box orient vertical webkit line clamp 3 overflow hidden webkit line clamp用來限制在乙個塊元素顯示的文字的行數。為了實現該效果，它需要組合其他的webkit屬性。常見結合屬性 ...
顯示文字 文字超出省略號顯示
在前端開發過程中，經常會遇到文字超過一行內容的情況，要求隱藏超出部分並且以省略號顯示。一 white space屬性 該屬性定義 規定段落中的文字不進行換行。所有主流瀏覽器都相容 二 overflow屬性 overflow 屬性規定當內容溢位元素框時發生的事情。所有主流瀏覽器都相容 三 text o...