CSS 实现元素较宽不能被完全展示时将其隐藏

?xiaoxiao, 发布于2019-08-01 18:20 / 2078人阅读

摘要：当到了某个标签不能被完全展示下时则不显示。可以看出来最后两个由于会超出的宽度，被折到了下一行，然后又被的隐藏。

首发于本人的博客 varnull.cn

遇到一个需求，需要实现的样式是固定宽度的容器里一排显示若干个标签，数量不定，每个标签的长度也不定。当到了某个标签不能被完全展示下时则不显示。大致效果如下，标签只显示一排，多了放不下了就不显示了。

标签部分 DOM 结构如下


    Cooking
    Coding
    Travel
    Photography
    Reading

乍一看这个问题很简单嘛，本着样式问题尽量不用 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...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51667.html

CSS 实现元素较宽不能被完全展示时将其隐藏

摘要：当到了某个标签不能被完全展示下时则不显示。可以看出来最后两个由于会超出的宽度，被折到了下一行，然后又被的隐藏。首发于本人的博客 varnull.cn 遇到一个需求，需要实现的样式是固定宽度的容器里一排显示若干个标签，数量不定，每个标签的长度也不定。当到了某个标签不能被完全展示下时则不显示。大致效果如下，标签只显示一排，多了放不下了就不显示了。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学习归纳总结（三）

摘要：也就是说，较宽的外边距决定两个元素最终离多远。盒模型结论二没有设定属性的元素始终会扩展到填满其父元素的宽度为止。布局的基本概念多栏布局有三种基本的实现方案固定宽度流动弹性。为文档添加样式的三种方法行内样式行内样式是写在HTML标签的style属性里的，比如： Hello Everyone! 行内样式会覆盖嵌入样式和链接样式。嵌入样式嵌入的css样式是放在HTML文档...

Drummor 2019-08-28 18:01 评论0 收藏0
JavaScript 编程精解中文第三版十五、处理事件

摘要：事件与节点每个浏览器事件处理器被注册在上下文中。事件对象虽然目前为止我们忽略了它，事件处理器函数作为对象传递事件对象。若事件处理器不希望执行默认行为通常是因为已经处理了该事件，会调用事件对象的方法。来源：ApacheCN『JavaScript 编程精解中文第三版』翻译项目原文：Handling Events 译者：飞龙协议：CC BY-NC-SA 4.0 自豪地采用谷歌翻译部分...

Clect 2019-08-23 18:19 评论0 收藏0
前端页面卡顿、也许是DOM操作惹的祸？

摘要：界面上的更改都是通过操作实现的，并不是通过传统的刷新页面实现的。操作优化的总原则是尽量减少操作。通过在文档片段上进行操作，可以降低操作对页面性能的影响，这种方式是创建一个文档片段，并在此片段上进行必要的操作，操作完成后将它附加在页面中。界面上UI的更改都是通过DOM操作实现的，并不是通过传统的刷新页面实现的。尽管DOM提供了丰富接口供外部调用，但DOM操作的代价很高，页面前端代码的...

AnthonyHan 2019-08-20 16:57 评论0 收藏0