CSS 實現元素較寬不能被徹底展現時將其隱藏

首發於本人的博客 varnull.cn

遇到一個需求，須要實現的樣式是固定寬度的容器裏一排顯示若干個標籤，數量不定，每一個標籤的長度也不定。當到了某個標籤不能被徹底展現下時則不顯示。大體效果以下，標籤只顯示一排，多了放不下了就不顯示了。

標籤部分 DOM 結構以下

<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>

乍一看這個問題很簡單嘛，本着樣式問題儘可能不用 js 解決的原則，寫了下面這堆樣式，完美實現效果。能夠看出來最後兩個 .label 因爲會超出 .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 不收縮，長度爲內容長度

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

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

可是剛高興沒多久，忽然發現了問題，若是第一個標籤的長度就超出了容器的寬度的話，並不會被整個隱藏，只是內容被截斷了，像下面這樣

這個問題困擾了我好一陣時間，一直在想 css 裏有什麼屬性能夠在子元素寬度超過父容器時把它整個隱藏（而非僅僅隱藏超出父容器的部分）。各類思索都沒有結果正準備放棄萬分糾結到底用不用 js 實現時，忽然冒出來一個想法 ==既然如今被折行的元素能夠被隱藏掉，那讓第一個標籤也折行不就好了嘛==。

那麼怎麼讓第一個標籤折行呢，想到一個比較 trick 的方法，讓它再也不是第一個元素就能夠利用 flex 的特性把它折行了~ 因而，在全部 .label 元素以前，添加了一個 .placeholder 元素只有 1px 寬，高度爲 100%。
Inspect 元素的話能夠看到確實 .placeholder 元素佔據了第一行的位置，實現了咱們想要的效果~

其實利用這個想法，使用 float 也能夠實現一樣的效果。雖然有點 trick 而且仍是藉助了一個額外的 DOM 元素，不過效果仍是完美實現了的~ 附上 codepen 連接供參考 https://codepen.io/Simona_Den...