cvmachine.com - 申博开户网

查找: 您的方位主页 > 电脑频道 > 电脑教程 > 阅览资讯:经过CSS完成元素较宽不能被安全并将其躲藏的办法

经过CSS完成元素较宽不能被安全并将其躲藏的办法

2018-01-05 17:26:20 来历:www.cvmachine.com 【

经过CSS完成元素较宽不能被安全并将其躲藏的办法

遇到一个需求,需求完成的款式是固定宽度的容器里一排显现若干个标签,数量不定,每个标签的长度也不定。当到了某个标签不能被彻底展现下时则不显现。大致作用如下,标签只显现一排,多了放不下了就不显现了。

经过CSS完成元素较宽不能被安全并将其躲藏的办法

标签部分 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>

乍一看这个问题很简单嘛,本着款式问题尽量不必 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完成元素较宽不能被安全并将其躲藏的办法

这个问题困扰了我好一阵时刻,一向在想 css 里有什么特点能够在子元素宽度超越父容器时把它整个躲藏(而非只是躲藏超出父容器的部分)。各种思索都没有成果正准备抛弃万分纠结究竟用不必 js 完成时, 忽然冒出来一个主意 已然现在被折行的元素能够被躲藏掉,那让榜首个标签也折行不就行了嘛 。

那么怎样让榜首个标签折行呢,想到一个比较 trick 的办法,让它不再是榜首个元素就能够运用 flex 的特性把它折行了~ 所以,在所有 .label 元素之前,增加了一个 .placeholder 元素只要 1px 宽,高度为 100%。 Inspect 元素的话能够看到的确 .placeholder 元素占有了榜首行的方位,完成了咱们想要的作用~

经过CSS完成元素较宽不能被安全并将其躲藏的办法

其实运用这个主意,运用 float 也能够完成相同的作用。尽管有点 trick 而且仍是凭借了一个额定的 DOM 元素,不过作用仍是完美完成了的~ 附上 codepen 链接供参阅 https://codepen.io/Simona_Deng/pen/dJvvBR

总结

以上所述是小编给咱们介绍的CSS 完成元素较宽不能被彻底展现时将其躲藏,期望对咱们有所协助,假如咱们有任何疑问请给我留言,小编会及时回复咱们的。在此也非常感谢咱们对申博开户网站的支撑!


本文地址:http://www.cvmachine.com/dnjc/95614.html
Tags: css 完成 元素
修改:申博开户网
188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet unibet unibet Ladbrokes Ladbrokes casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 m88 help
188bet www.188bet.com bwin 平博 unibet 明升 188bet uk Ladbrokes 德赢vwin 188bet m88.com w88 平博88 uedbet体育 188bet 188bet 威廉希尔 明升体育app 平博88 M88 Games vwin德赢 uedbet官网 bodog fun88 188bet
关于咱们 | 联络咱们 | 友情链接 | 网站地图 | Sitemap | App | 回来顶部