动态长文本限制显示行数

前言

视图（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 行，预定高度应该如何计算？

视图高度计算公式：height = line (fontSize lineHeight)；

Line：文本行数，这里设置为 6； FontSize：字体大小，这里设置为 15px； LineHeight：行间距，这里设置为 1.6；

6 (15px 1.6) = 144px，即预定高度应为 144px。

检查视图高度是否超过预定高度：

if (viewHeight > height) {
  ...
}

如何使用 CSS 设置视图高度值？我们需要额外使用一个布尔类型的变量 clamp，通过改变 clamp 的值，启用或禁用 CSS 类。

.default {
  font-size: 15px;
  line-height: 1.6;

  word-break: break-all;
}

.clamp {
  height: 144px;
  overflow: hidden;
}

<view id="iview" class="default {{clamp ? 'clamp' : ''}}">
  <text>长文本内容</text>
</view>

变量 clamp 默认为 false，类 clamp 为禁用状态；如果视图高度超过预定高度，设置 clamp 为 true，

if (viewHeight > height) {
  this.setData({
    clamp: true
  })
}

类 clamp 为启用状态，height: 144px; 表示视图高度为 144px；overflow: hidden; 表示隐藏文本溢出部分，效果如下：

这种方案文本末尾不会有省略号。

结语

两种方案各有优缺点，CSS -webkit-line-clamp 使用简单，JavaScript 需要一定的代码量，但更加灵活。还可以添加视图单击事件，实现类似于朋友圈长文本的展开和收缩效果，有兴趣的同学可以打开【米攸】小程序体验效果。