flex布局下,将内容限定在容器内(如内容超出以省略号显示)的实现方案
当文字超出容器宽度时,以省略号显示,这一需求在项目中十分常见,但是在flex布局下,可能会遇到问题,如省略号不显示,内容超出容器等问题,本文通过demo测试案例,记录下问题及解决方案。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrapper {
width: 200px;
display: flex;
}
.div1, .div2 {
flex: 1;/*占比,最小宽度*/
border: 1px solid blue;
}
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="div1">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
<div class="div2">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
</div>
</body>
</html>
如上代码所示,我们发现,文字内容并没有被限制在flex容器里面,以省略号显示,经过调试发现,flex水平布局的容器,flex的值表示的是宽度占比,同时,类似于设置了一个最小宽度min-width。(此时,当给容器的宽设置了一个小于占比 * 总宽的width值,是起不到作用的,但是设置了一个大于占比 * 总宽的width值时,宽度有效,并撑开外部容器。如果不设置宽度值,则当内容大于占比时,容器仍由内容撑开)。
有了以上实践理解之后,得到解决方案如下两种:
- 为内容的父级容器(本例中是.div1, .div2)设置overflow: hidden;
- 为内容的父级容器(本例中是.div1, .div2)设置一个小于占比的宽度,如width: 0;
补充于2019年8月6日
之前的表述有点绕,现在理解下来,实质就是:设置flex的值,等同于设置了一个min-width,而min-width什么时候能看到起作用呢,就是在内容很少的时候,内容少时,该容器的宽以min-width为准,内容多时,该容器的宽就是内容的宽。max-width与width的关系是同样道理的,height也是一样的