文本省略实现展开和收起功能（Taro）

目录

前言

思路

代码

CSS

效果

---

前言

        在写项目的过程中很容易有说明性文本溢出需要出现省略号的功能，并且可以展开查看所有信息，并能够收起。我在写项目的过程中就遇到了这个问题，本来是想要使用组件库中的组件进行功能的实现，但是结果不尽人意，组件库中的组件是在每一个文本上都添加展开和收起的提示，并不管文本是否到达溢出隐藏的要求，于是我就自己想着实现这个功能。

思路

• 通过一个变量控制展开和收起这个提示是否需要出现。
• 在获取到文本内容时遍历判断文本长度是否需要添加文本溢出省略
• 通过变量给文本动态的添加类名，判断文本是否需要溢出省略

代码

1. 拿到文本数据，判断文本长度，是否需要添加文本省略

   const res = await getAttentionPosts(data)
   res.data.data.list.forEach(item => {// 如果content长度大于80，则添加isShow:true属性，否则添加isShow:false属性item.isShow = item.content.length > 80 ? true : false;
   });

2. 定义一个响应式变量，用于控制展开和收起的动态切换，初始化值为自己计算的是否展示文本省略的值

     //显示收起和展开，就添加类名，不显示就不添加const [isExpanded, setIsExpanded] = useState(props.data.isShow);

3.  通过自己定义的变量实现展开和收起功能是否使用，以及展开和收起的动态切换

   <View className="text ">{/* 内容描述 */}<View className={isExpanded ? "ik-multiline-ellipsis" : ""}>{props.data.content}</View>//不使用溢出省略时，不显示下面内容{props.data.isShow && (<ViewclassName="toggle-button"onClick={() => setIsExpanded(!isExpanded)}>{isExpanded ? "展开" : "收起"}</View>)}
   </View>

CSS

/* 单行省略 */
.ik-single-ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}/* 多行省略-两行 */
.ik-multiline-ellipsis {width: 100%;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;white-space: normal !important;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}
/* 多行省略-三行 */
.ik-three-ellipsis {width: 100%;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;white-space: normal !important;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
}
/* 多行省略-四行 */
.ik-four-ellipsis {width: 100%;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;white-space: normal !important;-webkit-line-clamp: 4;-webkit-box-orient: vertical;
}

效果

使用溢出隐藏功能

不使用溢出隐藏