Flex布局下,文字超出省略号显示无效解决方案

Flex布局下标题文字溢出解决方案

最新推荐文章于 2025-10-10 09:46:02 发布

原创最新推荐文章于 2025-10-10 09:46:02 发布 · 5.1k 阅读

7 ·

CC 4.0 BY-SA版权

CSS样式专栏收录该内容

25 篇文章

订阅专栏

本文介绍在默认的Flex布局中，当标题文字超出容器宽度时如何使其正确显示为省略号。通过设置子元素的overflow属性为hidden或width为0，可以确保省略号效果正常工作。

默认的flex布局下的标题文字超出后`省略号显示无效`

解决办法：

在`flex:1`的盒子中，设置`overflow: hidden;` 或 `width: 0;`即可。

<div class="box">
	<div class="son">
		<p class="title">一大段文字超出后会缩略吗,怎么实现</p>
	</div>
</div>

.box{ 
	display: flex;
	justify-content: flex-start;
    align-items: center;
}
.son{ 
	flex: 1;
	overflow: hidden; // 设置overflow: hidden; 或 width: 0;
	// width: 0;
}
.title {
	// 省略号
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}