首页 编程 技术 应用
微信小程序文本超长截取样式 编程 | 前端编程 | 微信小程序
微信小程序文本超出显示长度时候自动截取并末尾显示省略号,可使用样式text-overflow。

在微信小程序中,文本超出显示长度时候自动截取并末尾显示省略号,分为两种情况,一是单行,二是多行。

/* 单行文本 */
.textEllipsisSig{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* 多行文本 */
.textEllipsisMul{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

但是,在使用时候,一定要设置当前文本的固定宽度,否则这个css样式不生效。

<view class="textEllipsisSig" style="width: 500rpx;">
    我是超长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的单行文本
</view>

上述代码中width: 500rpx;一定不能少。

 

点击阅读全文

发表 2023-04-03 20:26:17 祝融 →

京ICP备16053008号-4 公安备案号11010502049515

©️2022 码嗨路书版权所有,威廉宏业科技出品