文字超出多行省略號顯示方法

2021-07-28 19:34:24 字數 474 閱讀 7578

眾所周知,文字超出一行是大家很普遍使用的乙個方法

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

width:100px;//設定乙個寬度 

但是有的時候需求是超出第二行或第n行的時候就有點尷尬了,上述**並不能實現,

怎麼辦呢,請看下段**

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: n;//n->根據你自己的需求改變行數

-webkit-box-orient: vertical;

遺憾的是上述**只能在webkit核心瀏覽器才能有效。

開發移動端的時候,大多數瀏覽器都是webkit核心的,所以我覺得 移動端開發的時候在某種情況下可以使用

css 文字超出省略號,單行省略號和多行省略號

doctype html en utf 8 viewport content width device width,initial scale 1.0 document title html,body width 1000px padding 50px 30px margin 50px auto b...

文字單行省略號 多行出現省略號

第一種僅支援單行省略 width value overflow hidden text overflow ellipsis white space nowrap 第二種支援多行省略 width value overflow hidden text overflow ellipsis display ...

css多行省略號和單行省略號

單行溢位,超出部分顯示.或者擷取。前提必須有寬度 陌生人,我也為你祝福 願你有乙個燦爛的前程 願你有情人終成眷屬 願你在塵世獲得幸福 我只願面朝大海,春暖花開 div body html 陌生人,我也為你祝福 願你有乙個燦爛的前程 願你有情人終成眷屬 願你在塵世獲得幸福 我只願面朝大海,春暖花開 d...