text-overflow具有三個值。
乙個是clip，修剪文字。
第二個就是今天的主角ellipsis，顯示省略符號來代表被修剪的文字。
第三個是string，使用給定的字串來代表被修剪的文字，不過一般都不使用這個值。
clip的值
white-space
:nowrap;
width
:200px;
overflow
:hidden;
text-overflow
:clip;
單行文字溢位顯示省略號也是乙個連招，比較簡單
width
:200px;
white-space
:nowrap;
overflow
:hidden;
text-overflow
:ellipsis;
接下來重點來啦，利用display: -webkit-box，將物件作為彈性伸縮盒子模型顯示，-webkit-line-clamp限制第幾行顯示省略號，-webkit-box-orient: vertical設定或檢索伸縮盒物件的子元素的排列方式就可以完成這樣的效果啦
>
class
="test"
>
這是乙個很長很長很長很長很長很長很長很長很長很長很長很長的文字div
>
body
>
多行文字溢位
大家應該都知道用text overflow ellipsis屬性來實現單行文字的溢位顯示省略號 當然部分瀏覽器還需要加寬度width屬性。css overflow hidden text overflow ellipsis white space nowrap 但是這個屬性並不支援多行文字溢位顯示省...
單行 多行文字溢位隱藏
單行文字超出隱藏 在這裡插入 片 overflow hidden text overflow ellipsis white space nowrap 多行文字超出隱藏 在這裡插入 片 overflow hidden 超出隱藏 text overflow ellipsis 文字溢位時顯示省略標記 di...
vue多行文字溢位處理
在vue多行文字溢位的問題，工作中需要相容火狐，ie,和谷歌，新增文字kit字首的那種方式火狐和ie不相容，找到一種萬能的方法，如下 mounted fn.xdlines.defaults,options var this this for var k 0 k this.length k var s...