移动端省略号显示问题

原创已于 2024-03-25 16:26:14 修改 · 548 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

于 2021-05-07 15:28:31 首次发布

css 专栏收录该内容

4 篇文章

订阅专栏

问题：超出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;  // 要加
    }