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）

css 文字強制兩行超出就顯示省略號

1.強制一行的情況很簡單 overflow hidden 超出的隱藏 text overflow ellipsis 省略號 white space nowrap 強制一行顯示 2.如果要強制兩行的話，得用到css3的知識 overflow hidden text overflow ellipsis ...

css超出兩行顯示省略號

1.css寫法只對webkit核心的瀏覽器好用,對safari瀏覽器有相容問題.demo2.css超出兩行顯示省略號 個人寫法 twolines article ref article content ref p p cover v if isshow span div div template e...

css 文字兩行顯示，超出省略號表示

重點 text overflow ellipsis 只對display inline 起作用 例子 我說說打瞌睡黨風建設打火機說說色兒ab 一行 white space nowrap text overflow ellipsis overflow hidden word break break al...