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

2021-09-26 04:22:24 字數 696 閱讀 2065

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

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

一行顯示

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;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

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 起作用 例子 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...