实例讲解CSS实现元素较宽不能被完全展示时将其隐藏功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了实例讲解CSS实现元素较宽不能被完全展示时将其隐藏功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2002字，纯文字阅读大概需要3分钟。
内容图文
本文主要和大家分享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 实现元素较宽不能被完全展示时将其隐藏功能的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的实例讲解CSS实现元素较宽不能被完全展示时将其隐藏功能全部内容，希望文章能够帮你解决实例讲解CSS实现元素较宽不能被完全展示时将其隐藏功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。