首页 前端知识 flex:布局下,只针对 flex:1布局下文字超出省略号显示无效解决方案

flex:布局下,只针对 flex:1布局下文字超出省略号显示无效解决方案

2024-01-30 10:01:59 前端知识 前端哥 396 42 我要收藏

默认的flex布局下的 flex:1 标题文字超出后省略号显示无效
解决办法:
在flex:1的盒子中,设置overflow: hidden; 或 width: 0; 或者min-width:0即可。

<style>
		.container {
			display: flex;
			width: 50%;
			border: 1px solid black;
		}

		.left {
			width: 300px;
			height: 300px;
			background-color: aqua;
			margin-right: 30px;
		}

		.right {
			
			flex:1;
			width: 0; //或者 overflow:hidden 或者 min-width:0
			

		}
		.box{
			display: flex;
			
		}
		p{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		
	</style>
	<body>
		<div class="container">
			<div class="left"></div>
			<div class="right">
				<div class="box">
					<p>	测试数据测试数据测试数据测试数据测试数据测试数据</p>
				</div>
			</div>
				
		</div>
	
	</body>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/810.html
标签
评论
发布的文章

Echarts笔记

2024-02-11 10:02:32

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!