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

本文主要是介绍文本省略实现展开和收起功能（Taro），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

思路

代码

CSS

效果

前言

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

思路

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

代码

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

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;
});

定义一个响应式变量，用于控制展开和收起的动态切换，初始化值为自己计算的是否展示文本省略的值
```
  //显示收起和展开，就添加类名，不显示就不添加const [isExpanded, setIsExpanded] = useState(props.data.isShow);
```

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

<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;
}