问题

1
2
3
4
5
6
7
8
<div id="container">
	<span class="box">
		<p>box1</p>
	</span>
	<span class="box">
		<p>box222222222222222222</p>
	</span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#container {
	display: flex;
	width: 300px;
	outline: 1px solid #aaa;
}
.box {
	flex: 0 0 150px;
	outline: 1px solid lightpink;
}
/* 单行显示，溢出显示。。。 */
.box p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

结果：box2中的内容溢出了，没有显示省略号

解决方法

给 .box 添加 min-width:0;