首发于本人的博客 varnull.cncss
遇到一个需求,须要实现的样式是固定宽度的容器里一排显示若干个标签,数量不定,每一个标签的长度也不定。当到了某个标签不能被彻底展现下时则不显示。大体效果以下,标签只显示一排,多了放不下了就不显示了。segmentfault
标签部分 DOM 结构以下ide
<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>
乍一看这个问题很简单嘛,本着样式问题尽可能不用 js 解决的原则,写了下面这堆样式,完美实现效果。能够看出来最后两个 .label
因为会超出 .labels
的宽度,被折到了下一行,而后又被 .labels
的 overflow: hidden
隐藏。flex
.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; }
可是刚高兴没多久,忽然发现了问题,若是第一个标签的长度就超出了容器的宽度的话,并不会被整个隐藏,只是内容被截断了,像下面这样spa
这个问题困扰了我好一阵时间,一直在想 css 里有什么属性能够在子元素宽度超过父容器时把它整个隐藏(而非仅仅隐藏超出父容器的部分)。各类思索都没有结果正准备放弃万分纠结到底用不用 js 实现时,忽然冒出来一个想法
==既然如今被折行的元素能够被隐藏掉,那让第一个标签也折行不就好了嘛==。code
那么怎么让第一个标签折行呢,想到一个比较 trick 的方法,让它再也不是第一个元素就能够利用 flex 的特性把它折行了~ 因而,在全部 .label
元素以前,添加了一个 .placeholder
元素只有 1px 宽,高度为 100%。
Inspect 元素的话能够看到确实 .placeholder
元素占据了第一行的位置,实现了咱们想要的效果~ 图片
其实利用这个想法,使用 float 也能够实现一样的效果。虽然有点 trick 而且仍是借助了一个额外的 DOM 元素,不过效果仍是完美实现了的~ 附上 codepen 连接供参考 https://codepen.io/Simona_Den...element