问题:超出2行隐藏,第三行文字溢出解决
部分机型显示溢出
原代码
/* 2行超出省略号 */
.ellipsis-2 {
/* 将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 控制最多显示几行 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
/* autoprefixer: off */
-webkit-box-orient:vertical;
/* autoprefixer: on */
overflow: hidden;
}
解决方案:
在原代码基础上新增
line-height: 1.5;
问题:标签套标签不显示省略号问题
原代码
<view class='ellipsis'>
<text>
拿铁咖啡中杯
</text>
<text class='small'>
不需要糖包 / 不加奶 / 不加冰 / 浓郁
</text>
</view>
.ellipsis{
max-width: 488rpx;
font-weight: 400;
color: #333333;
font-size: 24rpx;
display: flex;
align-items: flex-end;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.small{
font-size: 20rpx;
color: #999999;
margin: 0 10rpx
}
解决方案:
.ellipsis
新增以下几行代码
display: -webkit-box;
-webkit-line-clamp: 1;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
正常两行行超出缩略
<view class="coupon-name">
立即领取立即领取立即领取立即领取
</view>
.coupon-name {
font-weight: 500;
font-size: 24rpx;
color: #713f04;
width: 152rpx;
line-height: 32rpx;
margin: 0 auto;
text-align: center;
/* 将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 控制最多显示几行 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
/* autoprefixer: off */
-webkit-box-orient:vertical;
/* autoprefixer: on */
overflow: hidden;
white-space: break-spaces; // 要加
height: 64rpx; // 要加
}