微信小程序大段文本内容过多，实现折叠与展开效果解决方案 以及 多行文本溢出隐藏不生效的解决方案_微信小程序 字数太多怎么解决

实现场景：

一个列表的文章内容过长，显示的时候要省略显示，但是还要有一个展开查看全文的点击事件，可以实现展开与折叠。

实现思路：

1. 使用两层容器，父标签设置max-height，预计成要显示行数的高度，并且使用overflow:hidden; 溢出隐藏；

2. 然后使用SelectorQuery wx.createSelectorQuery()query去查子标签的高度，如果子标签的高度高一些，就显示这个展开按钮；

   2.1 针对使用wx:for循环来渲染的列表，可以在wx:for的标签上，加个class，selectAll这个class，出来的结果是每一个列表项的数据；
   2.2 针对使用自定义组件时，在组件中是获取不到的，可以使用 .in(this)就可以获取了。

3. 获取到数据之后就可以通过判断来进行内容的显示隐藏等一系列操作了。

实现方案：

1. 设置组件的初始化数据：

  data: {
    maxHeight: 340, // 最大高度
    showIndex: '', // 显示内容的索引
    isShow: true, // 是否展开
  },
1
2
3
4
5

2. 获取元素的高度：

  // 生命周期
  lifetimes: {
    ready: function() {
		// 获取元素的高度
		const query = wx.createSelectorQuery();
		query.select('.realVal').boundingClientRect(rect=>{
			// 获取每一个数据
			rect.forEach((item , index) => {
	          if( item.height >  this.data.maxHeight) {
	            console.log(index , item.height);
	            // 更新需要展示的索引值
	            this.setData({
	              showIndex: index
	            })
	          }
	        });
		}).exec();
	}
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. wxml页面设置

<view class="site_Info_all">
	<text class="site_Info_left">{{item.name}}</text>
	<view class="site_Info_right {{isShow ? 'hide' : ''}}">
		<text class="realVal ">{{item.realVal}}</text>
	</view>
	// 根据业务需求，由于不是所有的内容都需要显示此项内容，所以进行一个判定
	<view class="institution show" wx:if="{{showIndex === index}}">
		<text bindtap="onClickShow">{{isShow ? '展开查看全部' : '收起隐藏内容'}}</text>
	</view>
</view>
1
2
3
4
5
6
7
8
9
10

4. 用户点击事件

// 点击展开隐藏
onClickShow: function() {
	this.setData({
		isShow: !this.data.isShow
	})
},
1
2
3
4
5
6

6. 点击显示隐藏的wxss样式

.site_Info_right {
	position: relative;
	width: 424rpx;
	margin-left: 30rpx;
	text-align: justify;
	line-height: 34rpx;
	/*关键属性（必须有的）  */
	display: -webkit-box;
}
.hide {
	/* 设置行高，如果没有超过最大高度，就不隐藏展开 */
	max-height: 340rpx;    /* 行高34rpx，预计10行内容 */
	overflow: hidden;
	/*规定子元素的排列方向 */
	-webkit-box-orient: vertical;
	/*限制文本显示的行数  */
	-webkit-line-clamp: 10;
	/*实现多余的文字隐藏并用省略号来代表被隐藏的文字  */
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 展开隐藏文字定位 */
.show {
	position: absolute;
	bottom: 0rpx;
	right: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

20201216 更新

多行文本溢出隐藏失效的解决方案

今天使用 Taro + react 开发实现多行文本省略时，发现不生效。

其实不止在使用 Taro + react 开发时会有这种情况，使用 Vue 开发时也会碰到这种情况，所以值得记录一下。

多行文本溢出隐藏的CSS代码：

.warp{
	overflow: hidden;  // 溢出隐藏
    text-overflow: ellipsis;  // 转换成省略号
    display: -webkit-box;  // 转换成弹性盒子
    -webkit-line-clamp: 2;  // 控制指定行数超出换行
    -webkit-box-orient: vertical;  // 控制里面的内容排列方式
}
1
2
3
4
5
6
7

上面的实现方案在普通项目中是没有问题的，可以正常实现多行文本省略号显示。但是在 Taro 框架编译之后，发现 -webkit-box-orient: vertical; 样式消失。

通过去 Taro 社区讨论，找到了新的解决方案：

方法1:

   /* autoprefixer: ignore next */
   -webkit-box-orient: vertical;
1
2

方法2:

 /* autoprefixer: off */
 -webkit-box-orient: vertical;
 /* autoprefixer: on */
1
2
3

两种方式都是加入 css 注释强制声明忽略下一行，防止被编译过滤。

通过上面两种方式来强制声明这条样式，就可以解决Taro 多行文本省略不生效的问题。

至此，功能效果基本实现，由于不同的业务需求，可能实现效果不同，欢迎大家留言讨论。