css文本強制兩行超出就顯示省略號,不顯示省略號

1. 強制一行的情況很簡單

overflow:hidden;　　　　 //超出的隱藏

text-overflow:ellipsis;　　//省略號

white-space:nowrap;　　//強制一行顯示

 

2. 如果要強制兩行的話，得用到css3的知識

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;　　//以此類推，3行4行直接該數字就好啦

在實際項目中，我們會發現-webkit-box-orient沒有生效，需要加入如下注釋

/*! autoprefixer: off */

 

最終代碼：

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

/*! autoprefixer: off */

-webkit-box-orient: vertical;

 

 

3.擴展：小程序使用textarea，彈窗使用cover-view，在cover-view中使用文字超出一行顯示省略號，會出現文字截取，不顯示省略號，解決方案，將該盒子設為塊元素（display:block）