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

背景：父组件display：flex布局，子组件flex:1,设置文字超多显示省略号，显示无效

解决方案：
子组件多加一层div
在flex:1的盒子中，设置overflow: hidden; 或 width: 0;。

 

<div class="sch_r">
	<h3>
		<p class="name">很多文字，解决省略号不显示问题。</p>
	</h3>
    <span>other</span>
</div>





<style>
.sch_r{ 
	display: flex;
    align-items: center;
}
.sch_r h3{ 
	flex: 1;
	overflow: hidden; // 设置overflow: hidden; 或 width: 0;
	// width: 0;
}
.name{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
</style>