上场景:
这里是一个flex布局,flex中有一个元素的类名是flex:1;在这个元素下面有一个文本溢出隐藏,看效果:
父元素明明已经设置了宽度,但是文本并不会被超出溢出隐藏,这里只需要给flex:1;的元素添加width:0;即可
<style>
.flex {
display: flex;
}
.w-12 {
width: 50px;
}
.flex-1 {
flex: 1;
width: 0;
}
.content {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="flex w-12">
<div class="flex-1">
<div class="content">
这是很长的内容这是很长的内容这是很长的内容这是很长的内容这是很长的内容这是很长的内容这是很长的内容这是很长的内容这是很长的内容这是很长的内容这是很长的内容
</div>
</div>
<div></div>
</div>
</body>
看效果: