css之flex布局文字过长省略宽度被撑开

最新推荐文章于 2025-06-06 17:44:34 发布

weixin_30763397

最新推荐文章于 2025-06-06 17:44:34 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/firstsight/p/10680339.html

本文探讨了在使用Flex布局时，如何解决自适应宽度元素与固定宽度元素之间的显示问题。通过调整CSS属性，如在自适应元素上设置width:0并对其内部元素设置width:100%，以及在固定宽度元素上使用flex属性，可以有效避免布局错乱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前写flex的时候，遇到过这样一个问题，代码如下

.flex{
　　display: flex;
}

.left{
　　flex:1 1 auto;
　　background: red;

}
.left p{
　　width: 100%;
　　text-overflow:ellipsis;
　　overflow:hidden;
　　white-space:nowrap;
}
.right{
　　background:green;
　　width: 200px;
}

<div class="flex">
    <div class="left">
        <p>我在左边，自适应布局我在左边，自适应布局我在左边，自适应布局我在左边，自适应布局</p>
        </div>
    <div class="right">我在右边，定宽</div>
</div>