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

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

//一行

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;

如果實現單行文字的溢位顯示省略號同學們應該都知道用text-overflow:ellipsis屬性來，當然還需要加寬度width屬來相容部分瀏覽。

實現方法：

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優化該方法。

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

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

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

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

css超出兩行顯示省略號

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