首頁  >  文章  >  web前端  >  實例講解CSS 實作元素較寬不能完全展示時將其隱藏功能

實例講解CSS 實作元素較寬不能完全展示時將其隱藏功能

小云云
小云云原創
2017-12-30 13:54:211529瀏覽

本文主要和大家分享CSS 實作元素較寬不能被完全展示時將其隱藏功能,遇到一個需求,需要實現的樣式是固定寬度的容器裡一排顯示若干個標籤,數量不定,每個標籤的長度也不定。當到了某個標籤不能被完全展示下時則不顯示。大致效果如下,標籤只顯示一排,多了放不下了就不顯示了。

 

標籤部分DOM 結構如下 


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

乍看這個問題很簡單嘛,本著樣式問題盡量不用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 元素,不過效果還是完美實現了的~

相關推薦:


CSS3中transform功能

#CSS3實作動態翻牌效果

實例詳解用CSS設定一個元素半透明

以上是實例講解CSS 實作元素較寬不能完全展示時將其隱藏功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn