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

参考: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;
}
相关推荐
汤姆yu11 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
说私域18 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域20 小时前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔20 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun1 天前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-54581 天前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
HERR_QQ2 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun2 天前
小程序导航设置更多内容的实现方法
小程序
说私域2 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序