flex布局下超出隐藏显示省略号失败

最新推荐文章于 2024-07-16 18:15:42 发布

cilocilo

最新推荐文章于 2024-07-16 18:15:42 发布

阅读量2k

点赞数

文章标签： flex css

本文链接：https://blog.youkuaiyun.com/weixin_39385430/article/details/109465272

版权

三剑客专栏收录该内容

2 篇文章

订阅专栏

在使用flex布局时，为子元素设置单行超出隐藏省略号可能无效，原因是`white-space: nowrap`影响了未设置宽度的flex项目。通过给父元素添加`width: 0;`可以解决这个问题，使文本能正确收缩并显示省略号。

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

flex布局下超出隐藏显示省略号失败

问题描述：

父元素使用了flex布局，给子元素添加单行超出隐藏显示省略号时，文本不隐藏

<view class="user__info">
	<view class="user__text">
		<view class="user__name van-ellipsis">陈十二啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</view>
		<text class="user__code van-ellipsis">邀请码：450779</text>
	</view>
	<van-image class="user__avatar" src="https://img.yzcdn.cn/vant/cat.jpeg" round ></van-image>
</view>

.user__info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.user__text{
    flex: 1;
    display: flex;
    flex-direction: column;
}
.user__name{
    color: #ffffff;
    font-size: 40rpx;
    font-weight: 500;
}
.user__avatar{
    margin-left: 40rpx;
    width: 140rpx;
    height: 140rpx;
}

在这里插入图片描述

问题原因：

white-space: nowrap会影响flex布局下为设置宽度的元素，flex布局的项目控件由于不能计算多余的空间导致无法收缩了，此时我们设置固定尺寸就可以收缩了

解决办法：

给父元素添加width: 0;

.user__text{
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 0;
}

在这里插入图片描述