CSS 实现元素较宽不能被完全展示时将其隐藏
首发于本人的博客 varnull.cn
遇到一个需求,需要实现的样式是固定宽度的容器里一排显示若干个标签,数量不定,每个标签的长度也不定。当到了某个标签不能被完全展示下时则不显示。大致效果如下,标签只显示一排,多了放不下了就不显示了。
标签部分 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 里有什么属性可以在子元素宽度超过父容器时把它整个隐藏(而非仅仅隐藏超出父容器的部分)。各种思索都没有结果正准备放弃万分纠结到底用不用 js 实现时,突然冒出来一个想法
==既然现在被折行的元素可以被隐藏掉,那让第一个标签也折行不就行了嘛==。
那么怎么让第一个标签折行呢,想到一个比较 trick 的方法,让它不再是第一个元素就可以利用 flex 的特性把它折行了~ 于是,在所有 .label
元素之前,添加了一个 .placeholder
元素只有 1px 宽,高度为 100%。
Inspect 元素的话可以看到确实 .placeholder
元素占据了第一行的位置,实现了我们想要的效果~
其实利用这个想法,使用 float 也可以实现同样的效果。虽然有点 trick 并且还是借助了一个额外的 DOM 元素,不过效果还是完美实现了的~ 附上 codepen 链接供参考 https://codepen.io/Simona_Den...
CSS 实现元素较宽不能被完全展示时将其隐藏的更多相关文章
- css 实现元素长宽等比缩放
实现思路(长宽比2:1): 以父级元素为基准, 子级 width:100%; (也就是父级宽度的 100%), padding-top:50% (也就是父级宽度的 50%, 根据 css 规范, pa ...
- 当div元素内的内容超出其宽度时,自动隐藏超出的内容
word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ te ...
- CSS Transform让百分比宽高布局元素水平垂直居中
很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...
- CSS实现元素水平垂直居中—喜欢对称美,这病没得治
[TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...
- css确定元素水平居中和垂直居中
---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...
- 隐藏元素的宽高无法通过原生js获取的问题
1.起源:移动app项目中,页面加载时需要加载国家下拉列表,将隐藏的透明浮层和一个显示加载过程中的框 显示出来,隐藏的透明浮层设置宽高都是100%即可,而这个加载提示框需要先得出它的宽高,然后再根据页 ...
- CSS实现元素居中原理解析
在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简单:如果它是一个行内元素,就对它的 ...
- js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
- CSS实现元素水平垂直居中
我们知道,实现元素的水平居中比较简单,在设置了宽度后,设置左右margin为auto就可以. 但是如何设置元素垂直居中呢? 当然,对于单行的文字,可以通过设置line-height来解决, 可以对于一 ...
随机推荐
- 38)PHP,获取数据库数据并在html中显示(晋级5)
还有一个加了单例模式的,在第52个. 首先是我的文件关系: 我的主php文件是index.php,我的配置文件php是BBB.php 我的数据库操作文件是 b.php 我的html文件是lo ...
- ASA5505升级license
1.准备工作 首先先看下目前的license # show activation-key Serial Number: JMX1J364741 Running Permanent Activation ...
- linux 新添加的硬盘格式化并挂载到目录下方法
需求: 新增加一块硬盘sdb,将sdb分区,只分一个区,格式化,挂载到目录/ssd下.原文:https://www.cnblogs.com/ddbear/p/7009736.html 1. 查看现在 ...
- 吴裕雄--天生自然python学习笔记:解决WebDriverException: Message: unknown error: missing or invalid 'entry.level'
会出现这个错误是因为你的chrome浏览器与下载的chromedriver.exe版本不一致造成的. 到这个地址:https://npm.taobao.org/mirrors/chromedriver ...
- 柱状图dataLabels 文字格式 以及如何获取柱子的name(名称)属性
dataLabels: { formatter:funnctin(){ return this.percentage //只在堆叠图或饼图中有效,是该点相对总值的百分比. this.point //数 ...
- python往mysql数据库中写入数据和更新插入数据
本文链接:https://blog.csdn.net/Mr__lqy/article/details/85719603 1. 连接mysql import pymysql db = pymysql.c ...
- deeplearning.ai 改善深层神经网络 week3 超参数调试、Batch Normalization和程序框架
这一周的主体是调参. 1. 超参数:No. 1最重要,No. 2其次,No. 3其次次. No. 1学习率α:最重要的参数.在log取值空间随机采样.例如取值范围是[0.001, 1],r = -4* ...
- CSA|EI
信息检索 CSA是学科特色的包含相关学科的内容,其网址是https://search.proquest.com/ 可以使用命令行检索: 分类的限制检索: 寻找检索线索可使用百科全书 EI是工程领域最全 ...
- unittest(6)- 作业- 测试类中写多个函数
实践作业:对多个接口发起请求,测试类中写多个测试函数 # 1. http_request import requests class HttpRequest: def http_request(sel ...
- 访问Http接口的两种请求方式
1. POST方式请求 public void testPostLogin() throws Exception{ String url = "http://192.168.1.160:80 ...