一、前言

我们在小程序中经常看到多行文本溢出时候会展示查看全部的按钮，如下图~

功能看起来比较简单，但是如何最合理的去实现其实是很重要的

二、技术实现

首先，大致的思路如下：

1. 判断当前文本是否溢出？
2. 如果溢出增加查看全部按钮
3. 点击全部按钮展示所有内容

重点就是在于第一步，解决了这个问题，后续都是常规操作了~

而判断当前文本是否溢出，在css领域当中其实是没有哪个属性是可以直接访问判断的，我们最快想到的思路就是就是按字符串来定，譬如我只展示120个字符串，超过了我就截取拼接...。可是我们仔细斟酌下，这就不是很可靠并且不具有普遍性，首先机型大小是有差别的，按字符限定，会导致有的机型展示两行、有的机型展示1行，展现形式不同导致我们无法选择此方案。

那么是否有纯css的方法去解决第一个问题呢，其实在web端是有这样的方案的，简单来说是通过障眼法去处理，大家感兴趣可以搜搜，但是这个方案同样不适用于小程序，毕竟使用到了css的某些特性，考虑到兼容问题，我们也没选择此方案。

那么我们只能通过js去判断了，思路也是非常的简单明了：

• 创建一个容器，在页面对用户来说是不可见的，但是可以装载所有的文本内容，并被文本内容撑开
• 获取隐藏容器的高度h
• 计算出项目需求的高度，譬如要求展示n行，行高为lineHeight,那么它的高度就是n*lineHeight
• 比较隐藏容器的高度h 和 n*lineHeight的大小，如果h > n*lineHeight 那么说明达到了溢出条件，我们控制展示更多按钮显示即可

那么小程序中如何获取某个容器的高度呢，我们通过this.createSelectorQuery这样的api能力即可

// 计算隐藏容器的高度 判断是否溢出
calculationBox() {
    const query = this.createSelectorQuery();
    query.select(".container-opacity").boundingClientRect();
    query.exec((res) => {
         if (res?.height > n * lineHeight) {
             // 文本溢出 需要展示更多按钮
             this.setData({
                showBtn: true
             })

以上就是本次分享的所有内容啦，希望对大家有所帮助~