国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【前端芝士樹】純CSS實現(xiàn)多行文本溢出顯示省略號

CNZPH / 3626人閱讀

摘要：前端芝士樹純實現(xiàn)多行文本溢出顯示省略號使用來控制行數(shù)由于用來限制在一個塊元素顯示的文本的行數(shù)這是一個不規(guī)范的屬性，它沒有出現(xiàn)在規(guī)范草案中，為了實現(xiàn)該效果，它需要組合其他外來的屬性。

【前端芝士樹】純CSS實現(xiàn)多行文本溢出顯示省略號

使用-webkit-line-clamp來控制行數(shù)

由于-webkit-line-clamp 用來限制在一個塊元素顯示的文本的行數(shù),這是一個不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在 CSS 規(guī)范草案中，為了實現(xiàn)該效果，它需要組合其他外來的 WebKit 屬性。
overflow: hidden;
text-overflow: ellipsis; //文本溢出時，用省略號“…”隱藏超出范圍的文本。
display: -webkit-box; //將對象作為彈性伸縮盒子模型顯示
-webkit-box-orient: vertical; //設(shè)置或檢索伸縮盒對象的子元素的排列方式

-webkit-line-clamp: 2; //控制文本的行數(shù)

該段樣式在 vue 或者 angular 項目中會失效，因為代碼構(gòu)建過程中使用了 autoprefixer

-webkit-box-orient 是過時的 flexbox 語法，現(xiàn)在它已經(jīng)轉(zhuǎn)化為了 flex-direction。
人們對 Autoprefixer 感到惱火的原因是因為 Autoprefixer 破壞了 line-clamp 的使用， 并且這個問題已經(jīng)存在了很長一段時間。
但是，使用舊的過時的 flexbox 語法是 line-clamp 在任何-webkit-瀏覽器中處理多行溢出的唯一純 CSS 方法。

Autoprefixer 作者的意見如下

是的，我知道 line-claimp 這個屬性。我個人不喜歡 webkite-only 的事情。所以我不想花費(fèi)我的時間而允許人們?nèi)プ鲞@個事情（但是可以通過/* autoprefixer: ignore next */或者/* autoprefixer: off */ 讓 autoprefixer去忽略這個屬性的檢查）。
但如果有人解決 webkit-only 的問題，我會去 fix 這個屬性的檢查。

所以最后的開發(fā)代碼如下：

/* autoprefixer: off */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;

-webkit-line-clamp: 2;
參考文獻(xiàn)
《多行文本溢出顯示省略號(…)全攻略-WEB前端開發(fā)》
《Ask not to remove the code: -webkit-box-orient · Issue #1141 · postcss/autoprefixer》

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117036.html

相關(guān)文章

  • CSS - 純css實現(xiàn)多行文本溢出省略（兼容所有瀏覽器）

    摘要：前言多行文本超出高度限制出現(xiàn)省略號移動端多為內(nèi)核的有擴(kuò)展屬性但并不是規(guī)范中的屬性端往往要借助去實現(xiàn)這一效果，但麻煩且不是很靠譜，今天就用純來實現(xiàn)一個完全兼容的多行省略。 前言 多行文本超出高度限制出現(xiàn)省略號 , 移動端多為webkit內(nèi)核的 , 有擴(kuò)展屬性-webkit-line-clamp , 但并不是CSS規(guī)范中的屬性 , PC端往往要借助js去實現(xiàn)這一效果，但麻煩且不是很靠譜，今...

    李義 評論0 收藏0

  • 【芝士整理】CSS基礎(chǔ)圖譜

    摘要：為了實現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動產(chǎn)生，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。 選擇器注意點 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結(jié)尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節(jié)點 A + B - 下一個兄弟節(jié)點 A...

    iOS122 評論0 收藏0

  • 前端面試題-文本溢出顯示省略號（...）

    摘要：當(dāng)文本溢出包含元素時，顯示省略符號來代表被修剪的文本。文本不會換行，文本會在在同一行上繼續(xù)，直到遇到標(biāo)簽為止。說明限制在一個塊元素顯示的文本的行數(shù)。將對象作為彈性伸縮盒子模型顯示。，在多行文本的情況下，用省略號隱藏超出范圍的文本。 一、文本溢出隱藏 如下圖所示，我們需要對溢出文本進(jìn)行...顯示的操作，單行多行的情況都有（具體幾行得看設(shè)計的心情） showImg(https://segm...

    AprilJ 評論0 收藏0

  • 前端面試題-文本溢出顯示省略號（...）

    摘要：當(dāng)文本溢出包含元素時，顯示省略符號來代表被修剪的文本。文本不會換行，文本會在在同一行上繼續(xù)，直到遇到標(biāo)簽為止。說明限制在一個塊元素顯示的文本的行數(shù)。將對象作為彈性伸縮盒子模型顯示。，在多行文本的情況下，用省略號隱藏超出范圍的文本。 一、文本溢出隱藏 如下圖所示，我們需要對溢出文本進(jìn)行...顯示的操作，單行多行的情況都有（具體幾行得看設(shè)計的心情） showImg(https://segm...

    Donald 評論0 收藏0

  • 前端面試題-文本溢出顯示省略號（...）

    摘要：當(dāng)文本溢出包含元素時，顯示省略符號來代表被修剪的文本。文本不會換行，文本會在在同一行上繼續(xù)，直到遇到標(biāo)簽為止。說明限制在一個塊元素顯示的文本的行數(shù)。將對象作為彈性伸縮盒子模型顯示。，在多行文本的情況下，用省略號隱藏超出范圍的文本。 一、文本溢出隱藏 如下圖所示，我們需要對溢出文本進(jìn)行...顯示的操作，單行多行的情況都有（具體幾行得看設(shè)計的心情） showImg(https://segm...

    CHENGKANG 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<