遇到一個(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)如下 

<div class="labels">  
    <span class="label">Cooking</span>
    <span class="label">Coding</span>
    <span class="label">Travel</span>
    <span class="label">Photography</span>
    <span class="label">Reading</span>
</div>

乍一看這個(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_Deng/pen/dJvvBR

總結(jié)

以上所述是小編給大家介紹的CSS 實(shí)現(xiàn)元素較寬不能被完全展示時(shí)將其隱藏，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論