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

日期:2020-12-10 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

遇到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 完成元素较宽不可以被彻底展现时将其掩藏,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!