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

資訊專欄INFORMATION COLUMN

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

CNZPH / 3623人閱讀

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

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

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

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

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

該段樣式在 vue 或者 angular 項(xiàng)目中會(huì)失效，因?yàn)榇a構(gòu)建過程中使用了 autoprefixer

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

Autoprefixer 作者的意見如下

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

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

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

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

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

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

相關(guān)文章

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

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

    李義 評(píng)論0 收藏0

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

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

    iOS122 評(píng)論0 收藏0

  • 前端面試題-文本溢出顯示省略號(hào)（...）

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

    AprilJ 評(píng)論0 收藏0

  • 前端面試題-文本溢出顯示省略號(hào)（...）

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

    Donald 評(píng)論0 收藏0

  • 前端面試題-文本溢出顯示省略號(hào)（...）

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

    CHENGKANG 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<