CSS 完成元素较宽不可以被彻底展现时将其掩藏的

遇到1个要求，必须完成的款式是固定不动宽度的器皿里1排显示信息若干个标识，数量不确定，每一个标识的长度也不确定。当到了某个标识不可以被彻底展现下时则无法显示。大概实际效果以下，标识只显示信息1排，多了放不下了就无法显示了。
 

标识一部分 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>

乍1看这个难题很简易嘛，本着款式难题尽可能无需 js 处理的标准，写了下面这堆款式，完善完成实际效果。能够看出来最终两个 .label 因为会超过 .labels 的宽度，被折到了下1行，随后又被 .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; // 1行 label 的高宽比
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

可是刚开心不久，忽然发现了难题，假如第1个标识的长度就超过了器皿的宽度的话，其实不会被全部掩藏，只是內容被断开了，像下面这样
 

这个难题困扰了我好1阵時间，1直在想 css 里有甚么特性能够在子元素宽度超出父器皿时把它全部掩藏（而非仅仅掩藏超过父器皿的一部分）。各种各样思考都沒有結果正提前准备舍弃万分纠结究竟用无需 js 完成时， 忽然冒出来1个念头 既然如今被折行的元素能够被掩藏掉，那让第1个标识也折行不就可以了嘛 。

那末如何让第1个标识折行呢，想起1个较为 trick 的方式，让它已不是第1个元素便可以运用 flex 的特点把它折行了~ 因而，在全部 .label 元素以前，加上了1个 .placeholder 元素仅有 1px 宽，高宽比为 100%。 Inspect 元素的话能够看到的确 .placeholder 元素占有了第1行的部位，完成了大家要想的实际效果~

实际上运用这个念头，应用 float 还可以完成一样的实际效果。尽管有点 trick 而且還是依靠了1个附加的 DOM 元素，但是实际效果還是完善完成了的~ 附上 codepen 连接供参照 https://codepen.io/Simona_Deng/pen/dJvvBR

总结

以上所述是网编给大伙儿详细介绍的CSS 完成元素较宽不可以被彻底展现时将其掩藏，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！