• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序长文本限制显示行数

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言

视图(View)渲染长文本时,受限于视图的宽度(Width),长文本可能需要显示多行,才可以将长文本的内容全部展示出来;也就是说,文本行高(FontSize * LineHeight)一定的情况下,视图的高度(Height)取决于长文本渲染完成之后的行数(Line)。如果页面布局要求视图的高度必须是固定的,本质上就可以通过限制长文本的显示行数来实现。

本文介绍两种长文本限制显示行数的方案。

CSS -webkit-line-clamp

这个 CSS 属性的名称有点儿与众不同,前面带有 -webkit- 前缀,先说一下这个属性为什么能够被使用。

官方文档中关于 小程序运行环境 的介绍:

WKWebView、chromium定制内核 和 Chrome WebView 都是基于 WebKit 构建的。

WebKit 是什么?WebKit 是一个跨平台的 Web 浏览器引擎,相当于小程序页面的渲染都是通过 WebKit 完成的。WebKit 除了支持 CSS 的标准属性之外,还支持不少扩展属性,这些属性的名称以 -webkit- 为前缀,-webkit-line-clamp 就是其中之一,它可以把块容器(Block Container)中的内容限制为指定的行数,使用时需要和其它几个属性联合使用:

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

<view class="clamp">
  <text>长文本内容</text>
</view>

-webkit-line-clamp: 6; 表示限制文本最多显示为 6 行,如果文本实际显示超过 6 行,第 6 行末尾会出现省略号(...),从第 7 行开始的内容会被隐藏,效果如下:

目前使用这种文案,文本末尾的省略号是不支持修改或移除的(社区已有同学反馈些问题,官方尚无回复),如果不能满足需求,就需要使用第二种方案。

JavaScript

视图中的文本内容按默认方式渲染完成之后,获取视图的高度,如果视图的高度超过预定高度,使用 CSS 设置视图高度值为预定高度,以及隐藏溢出文本内容;如果视图的高度未超过预定高度,什么也不做。

使用视图 iview 渲染长文本:

.default {
  font-size: 15px;
  line-height: 1.6;
  
  word-break: break-all;
}

<view id="iview" class="default">
  <text>长文本内容</text>
</view>

获取视图 iview 的高度:

const query = wx.createSelectorQuery()

query.select('#iview').boundingClientRect()

query.exec(function (res) {
  // 视图高度
  const viewHeight = res[0].height
  
  ...
})

如果视图文本限制最多显示 6 行,预定高度应该如何计算?

其余内容请参考 小程序长文本限制显示行数


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap