文本省略实现展开和收起功能（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 && (
         <View
            className="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;
}