成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS 實(shí)現(xiàn)元素較寬不能被完全展示時(shí)將其隱藏

張紅新 / 2265人閱讀

摘要：當(dāng)?shù)搅四硞€(gè)標(biāo)簽不能被完全展示下時(shí)則不顯示?？梢钥闯鰜?lái)最后兩個(gè)由于會(huì)超出的寬度，被折到了下一行，然后又被的隱藏。

首發(fā)于本人的博客 varnull.cn

遇到一個(gè)需求，需要實(shí)現(xiàn)的樣式是固定寬度的容器里一排顯示若干個(gè)標(biāo)簽，數(shù)量不定，每個(gè)標(biāo)簽的長(zhǎng)度也不定。當(dāng)?shù)搅四硞€(gè)標(biāo)簽不能被完全展示下時(shí)則不顯示。大致效果如下，標(biāo)簽只顯示一排，多了放不下了就不顯示了。

標(biāo)簽部分 DOM 結(jié)構(gòu)如下


    Cooking
    Coding
    Travel
    Photography
    Reading

乍一看這個(gè)問(wèn)題很簡(jiǎn)單嘛，本著樣式問(wèn)題盡量不用 js 解決的原則，寫(xiě)了下面這堆樣式，完美實(shí)現(xiàn)效果?？梢钥闯鰜?lái)最后兩個(gè) .label 由于會(huì)超出 .labels 的寬度，被折到了下一行，然后又被 .labels 的 overflow: hidden 隱藏。

.label {
    display: block;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    background-color: #e1ecf4;
    border-radius: 12px;
    font-size: 14px;
    flex-shrink: 0; // label 不收縮，長(zhǎng)度為內(nèi)容長(zhǎng)度

    & + .label {
        margin-left: 5px;
    }
}

.labels {
    height: 24px; // 一行 label 的高度
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

但是剛高興沒(méi)多久，突然發(fā)現(xiàn)了問(wèn)題，如果第一個(gè)標(biāo)簽的長(zhǎng)度就超出了容器的寬度的話，并不會(huì)被整個(gè)隱藏，只是內(nèi)容被截?cái)嗔?，像下面這樣

這個(gè)問(wèn)題困擾了我好一陣時(shí)間，一直在想 css 里有什么屬性可以在子元素寬度超過(guò)父容器時(shí)把它整個(gè)隱藏（而非僅僅隱藏超出父容器的部分）。各種思索都沒(méi)有結(jié)果正準(zhǔn)備放棄萬(wàn)分糾結(jié)到底用不用 js 實(shí)現(xiàn)時(shí)，突然冒出來(lái)一個(gè)想法 ==既然現(xiàn)在被折行的元素可以被隱藏掉，那讓第一個(gè)標(biāo)簽也折行不就行了嘛==。

那么怎么讓第一個(gè)標(biāo)簽折行呢，想到一個(gè)比較 trick 的方法，讓它不再是第一個(gè)元素就可以利用 flex 的特性把它折行了~ 于是，在所有 .label 元素之前，添加了一個(gè) .placeholder 元素只有 1px 寬，高度為 100%。
Inspect 元素的話可以看到確實(shí) .placeholder 元素占據(jù)了第一行的位置，實(shí)現(xiàn)了我們想要的效果~

其實(shí)利用這個(gè)想法，使用 float 也可以實(shí)現(xiàn)同樣的效果。雖然有點(diǎn) trick 并且還是借助了一個(gè)額外的 DOM 元素，不過(guò)效果還是完美實(shí)現(xiàn)了的~ 附上 codepen 鏈接供參考 https://codepen.io/Simona_Den...

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

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

相關(guān)文章

  • CSS 實(shí)現(xiàn)元素較寬不能被完全展示時(shí)將其隱藏

    摘要：當(dāng)?shù)搅四硞€(gè)標(biāo)簽不能被完全展示下時(shí)則不顯示?？梢钥闯鰜?lái)最后兩個(gè)由于會(huì)超出的寬度，被折到了下一行，然后又被的隱藏。 首發(fā)于本人的博客 varnull.cn 遇到一個(gè)需求，需要實(shí)現(xiàn)的樣式是固定寬度的容器里一排顯示若干個(gè)標(biāo)簽，數(shù)量不定，每個(gè)標(biāo)簽的長(zhǎng)度也不定。當(dāng)?shù)搅四硞€(gè)標(biāo)簽不能被完全展示下時(shí)則不顯示。大致效果如下，標(biāo)簽只顯示一排，多了放不下了就不顯示了。showImg(https://segme...

    ?xiaoxiao, 評(píng)論0 收藏0

  • CSS 設(shè)計(jì)指南 學(xué)習(xí)筆記 二

    摘要：原文地址本篇文章是筆者的設(shè)計(jì)指南學(xué)習(xí)筆記的第二部分，由于最近都在準(zhǔn)備期末考的事，所以都沒(méi)來(lái)得及對(duì)設(shè)計(jì)指南進(jìn)行一些總結(jié)，沒(méi)有看之前第一部分的話也可以從這里傳送過(guò)去。 原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是筆者的 《CSS 設(shè)計(jì)指南》 學(xué)習(xí)筆記的第二部分，由于最近都在準(zhǔn)備期末考的事，所以都沒(méi)來(lái)得及對(duì) ...

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

  • css學(xué)習(xí)歸納總結(jié)（三）

    摘要：也就是說(shuō)，較寬的外邊距決定兩個(gè)元素最終離多遠(yuǎn)。盒模型結(jié)論二沒(méi)有設(shè)定屬性的元素始終會(huì)擴(kuò)展到填滿其父元素的寬度為止。布局的基本概念多欄布局有三種基本的實(shí)現(xiàn)方案固定寬度流動(dòng)彈性。 為文檔添加樣式的三種方法 行內(nèi)樣式 行內(nèi)樣式是寫(xiě)在HTML標(biāo)簽的style屬性里的，比如： Hello Everyone! 行內(nèi)樣式會(huì)覆蓋嵌入樣式和鏈接樣式。 嵌入樣式 嵌入的css樣式是放在HTML文檔...

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

  • JavaScript 編程精解 中文第三版 十五、處理事件

    摘要：事件與節(jié)點(diǎn)每個(gè)瀏覽器事件處理器被注冊(cè)在上下文中。事件對(duì)象雖然目前為止我們忽略了它，事件處理器函數(shù)作為對(duì)象傳遞事件對(duì)象。若事件處理器不希望執(zhí)行默認(rèn)行為通常是因?yàn)橐呀?jīng)處理了該事件，會(huì)調(diào)用事件對(duì)象的方法。 來(lái)源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項(xiàng)目原文：Handling Events 譯者：飛龍 協(xié)議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯 部分...

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

  • 前端頁(yè)面卡頓、也許是DOM操作惹的禍？

    摘要：界面上的更改都是通過(guò)操作實(shí)現(xiàn)的，并不是通過(guò)傳統(tǒng)的刷新頁(yè)面實(shí)現(xiàn)的。操作優(yōu)化的總原則是盡量減少操作。通過(guò)在文檔片段上進(jìn)行操作，可以降低操作對(duì)頁(yè)面性能的影響，這種方式是創(chuàng)建一個(gè)文檔片段，并在此片段上進(jìn)行必要的操作，操作完成后將它附加在頁(yè)面中。 界面上UI的更改都是通過(guò)DOM操作實(shí)現(xiàn)的，并不是通過(guò)傳統(tǒng)的刷新頁(yè)面實(shí)現(xiàn) 的。盡管DOM提供了豐富接口供外部調(diào)用，但DOM操作的代價(jià)很高，頁(yè)面前端代碼的...

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

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

0條評(píng)論

閱讀需要支付1元查看
<