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也是一样的

posted @ 2018-09-10 14:18  近距离  阅读(4707)  评论(0编辑  收藏  举报