display:flex布局下white-space:nowrap失效问题解决

最新推荐文章于 2023-11-21 15:49:29 发布

原创最新推荐文章于 2023-11-21 15:49:29 发布 · 4.6k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #flex

前端项目常见问题总结专栏收录该内容

16 篇文章

订阅专栏

当使用Flex布局且元素宽度自适应时，white-space:nowrap可能导致内容区撑开，影响父元素的自适应宽度。为修复此问题，只需在父元素样式中添加min-width:0。这是一个关于前端开发中的CSS Flex布局和文本溢出处理的技巧。

文字长度过长显示省略号的样式设置方法众所周知：

h3 {
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

然而有一次，我在项目中用到white-space: nowrap的时候，发现它失效了，我的项目是flex布局，宽度自适应的部分，white-space: nowrap撑开了内容区的长度，省略号是显示了，但是父元素的自适应宽度完全不对了。

页面部分布局如下：

<template>
	<div class="parent">
		<el-col :span="6" v-for="item in list" :key="item.id">
			<h3>{{ item.title }}</h3>
			......
		</el-col>
	</div>
</template>

样式如下：

	.parent {
		flex: auto;
	    min-height: 100vh;
	    display: flex;
	    flex-direction: column;
	}
	.parent h3 {
		white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
}

查了一下才知道，原来是因为display:flex影响的，white-space:nowrap会影响flex布局下未设定宽度的元素，所以给设置了display:flex的父元素设置一下min-width: 0;即可解决问题。

.parent {
	flex: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
	min-width: 0;
}