小程序在 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;
}
相关推荐
默魔6 小时前
uniapp 微信小程序点击开始倒计时
微信小程序·小程序·uni-app
阿俊-全栈开发17 小时前
crmeb多门店对接拉卡拉支付小程序聚合收银台集成全流程详解
小程序·php·拉卡拉聚合收银台·拉卡拉三方支付
難釋懷1 天前
微信小程序全局配置
微信小程序·小程序
Enti7c1 天前
微信小程序核心知识点速览
微信小程序·小程序
2501_915918412 天前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域2 天前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷2 天前
第一个小程序
小程序
春哥的研究所2 天前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld2 天前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点2 天前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台