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

?xiaoxiao, 發(fā)布于2019-08-01 18:20 / 2226人閱讀

摘要：當?shù)搅四硞€標簽不能被完全展示下時則不顯示。可以看出來最后兩個由于會超出的寬度，被折到了下一行，然后又被的隱藏。

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

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

標簽部分 DOM 結構如下


    Cooking
    Coding
    Travel
    Photography
    Reading

乍一看這個問題很簡單嘛，本著樣式問題盡量不用 js 解決的原則，寫了下面這堆樣式，完美實現(xiàn)效果。可以看出來最后兩個 .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 不收縮，長度為內(nèi)容長度

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

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

但是剛高興沒多久，突然發(fā)現(xiàn)了問題，如果第一個標簽的長度就超出了容器的寬度的話，并不會被整個隱藏，只是內(nèi)容被截斷了，像下面這樣

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

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

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

GPU云服務器云服務器 js實現(xiàn)元素隱藏 js實現(xiàn)元素隱藏顯示不能完全符合備案要求隱藏元素

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51667.html

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

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

張紅新 2019-08-29 14:10 評論0 收藏0
CSS 設計指南學習筆記二

摘要：原文地址本篇文章是筆者的設計指南學習筆記的第二部分，由于最近都在準備期末考的事，所以都沒來得及對設計指南進行一些總結，沒有看之前第一部分的話也可以從這里傳送過去。原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是筆者的《CSS 設計指南》學習筆記的第二部分，由于最近都在準備期末考的事，所以都沒來得及對 ...

printempw 2019-08-30 12:47 評論0 收藏0
css學習歸納總結（三）

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

Drummor 2019-08-28 18:01 評論0 收藏0
JavaScript 編程精解中文第三版十五、處理事件

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

Clect 2019-08-23 18:19 評論0 收藏0
前端頁面卡頓、也許是DOM操作惹的禍？

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

AnthonyHan 2019-08-20 16:57 評論0 收藏0