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

效果

使用溢出隐藏功能

不使用溢出隐藏