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

重點：text-overflow: ellipsis;只對display：inline；起作用

例子：

class="
a">我說說class="
b">打瞌睡黨風建設打火機說說色兒
ab

//

一行    white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
//兩行
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2
;    line-clamp: 2
;    -webkit-box-orient: vertical;

實現方法：

overflow: hidden;

text-overflow:ellipsis;
white-space: nowrap;

但是這個屬性只支援單行文字的溢位顯示省略號，如果我們要實現多行文字溢位顯示省略號呢。

接下來重點說一說多行文字溢位顯示省略號，如下。

實現方法：

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;

overflow: hidden;

適用範圍：

因使用了webkit的css擴充套件屬性，該方法適用於webkit瀏覽器及移動端；

注：-webkit-line-clamp用來限制在乙個塊元素顯示的文字的行數。 為了實現該效果，它需要組合其他的webkit屬性。常見結合屬性：

display: -webkit-box; 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。

-webkit-box-orient 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。

實現方法：

p

p::after

適用範圍：

該方法適用範圍廣，但文字未超出行的情況下也會出現省略號,可結合js優化該方法。

注：將height設定為line-height的整數倍，防止超出的文字露出。

給p::after新增漸變背景可避免文字只顯示一半。

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

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

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

重點 text overflow ellipsis 只對display inline 起作用 如果實現單行文字的溢位顯示省略號同學們應該都知道用 text overflow ellipsis 屬性來，當然還需要加 寬度width 屬來相容部分瀏覽。一行顯示white space nowrap tex...

css超出兩行顯示省略號

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