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

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;
}

转载于：https://blog.csdn.net/weixin_39385430/article/details/109465272