遇到一個需求，需要實現的樣式是固定寬度的容器里一排顯示若干個標簽，數量不定，每個標簽的長度也不定。當到了某個標簽不能被完全展示下時則不顯示。大致效果如下，標簽只顯示一排，多了放不下了就不顯示了。
 

標簽部分 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_Deng/pen/dJvvBR

總結

以上所述是小編給大家介紹的CSS 實現元素較寬不能被完全展示時將其隱藏，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！