小程序进阶-长（多行）文本内容展开与收起、单行文本溢出隐藏

光图强

已于 2022-07-01 17:25:18 修改

阅读量4.4k

点赞数 2

分类专栏：小程序微信文章标签：小程序

于 2022-07-01 17:23:25 首次发布

本文链接：https://blog.csdn.net/weixin_43166227/article/details/125558469

版权

小程序同时被 2 个专栏收录

17 篇文章

订阅专栏

微信

11 篇文章

订阅专栏

一、简介

经常玩论坛或者开发过论坛都知道，长文本是构建论坛的重要组成元素。浏览论坛首先展示的是消息列表，然后点击某一条消息浏览详情。列表展示时不可能展示全部文本，就得解决多行文本溢出的问题。例如：

微博列表：文章内容超出指定字数时，用…省略，点击“展开“可查看全文。
知乎问题列表：超出指定文字数目，则用…代替。
其次，作为比较，单行文本溢出，也是我们常见的问题。
那么，我们该如何解决并实现我们需要的样式呢？

二、实现

（一）. 长文本内容展开与收起：

需求分析

文本超长省略，主要是通过 line-clamp 实现：

.text-clamp2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

文本效果：
在这里插入图片描述

如何判断文本是否超出两行，显示「全文」「收起」按钮呢？
通过上图我们可以发现，当文本区域省略时，它的高度会相对变小，那么我们只需要获取到不省略和省略时的文本区域高度，进行比较就能知道是否超出了两行。

实现需求：什么是 SelectQuery？如何去使用它？
从微信小程序官方文档描述来看， SelectQuery 是一个查询节点信息的对象，它可以选择匹配选择器的所有节点以及显示区域内的节点信息。既然它可以类似 jQuery 那样去匹配选择器，那么我们可以获取到需要的高度信息了。
html核心代码

<view class="contentInner1 text-clamp2">小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。</view>
<view class="contentInner2">小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。</view>

js核心代码

wx.createSelectorQuery().selectAll(".contentInner1, .contentInner2").boundingClientRect(res => {
		console.log(res)
	}).exec()

查询结果（文本区域省略时高度为 52px、不省略时为 104px，只要 res[0].height < res[1].height，此时就应该显示展开收起按钮）

逻辑设计上的优化
由于论坛帖子不只一个，我们得匹配对应的两个长文本节点，如果都给一个唯一的选择器，那么在页面中一次性查询这么多节点，很明显这不是最优的。
实际上我们可以将这封装成一个自定义组件，可供每个页面循环复用，在组件内我们只需要关注单个长文本的节点信息，不需要一次性获取当前页面的所有长文本节点，更重要的是：在组件内每个长文本的展开与收起状态都是独立的，也省去了在页面内定义字段去标识每个帖子的展开状态。
实现效果
参数说明
属性类型默认值说明
content String “示例文本” 长文本内容
maxline Number 1 最多展示行数[只允许 1-5 的正整数]
position String “left” 展开收起按钮位置[可选值为 left right]
foldable Boolean true 点击长文本是否展开收起
代码片段：https://developers.weixin.qq.com/s/qqTmYMmt7CvN

（二）多行文字溢出隐藏

white-space 属性控制段落中的文本不进行换行
text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示、
overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条（内容是否被修剪）

示例代码如下：

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div.test
{
   white-space:nowrap; 
   width:12em; 
   overflow:hidden; 
   border:1px solid #000000;
}
</style>
</head>
<body>

<p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>
<p>div 使用 &quot;text-overflow:ellipsis&quot;:</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>div 使用 &quot;text-overflow:clip&quot;:</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
<p>div 使用自定义字符串 &quot;text-overflow: &gt;&gt;&quot;(只在 Firefox 浏览器下有效):</p>
<div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div>
</body>
</html>

运行效果如图：