小程序在 skyline 下如何开启多行省略

清风细雨_林木木2025-04-21 8:50

参考：https://developers.weixin.qq.com/community/develop/doc/000a648baacca06e83f1034d66c000

前言

小程序在 skyline 下不支持 line-clamp，想要开启多行省略使用 text 组件的 max-lines 结合 overflow 属性。

解决办法：skyline 下不支持 line-clamp，可以使用 text 组件的 max-lines 结合 overflow 属性使用。

拓展：

bash 复制代码

1. 内联文本只能用 text 组件，不能用 view，如 <text> foo <text>bar</text> </text>
2. 新增 span 组件用于内联文本和图片，如 <span> <image> </image> <text>bar</text> </span>

资料地址

https://developers.weixin.qq.com/miniprogram/dev/component/text.html

实例

html 复制代码

<view class="product-info">
  ......
  <text class="product-desc" overflow="ellipsis" max-lines="{{2}}">xxxxxxxxxx</text>
  ......
</view>

css 复制代码

.product-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 15rpx;
}