<aside> 📖 目录

多行文本展开收起的实现方式,你知道几种? - 掘金

</aside>

前言

多行文本超过指定行数，进行文本截断并显示省略号，并通过展开和收起来控制是否显示全部内容，这个功能很常见，实现方式也有很多种，那么我来整理一下我知道的几种实现方式，代码实现是基于 Vue3。

省流

demo: xiaocheng555.github.io/text-ellips…

代码: github.com/xiaocheng55…

基于 - webkit-line-clamp 的实现

[](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c979100331544b9d9db18f987b2ef58d~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)

实现核心就是 -webkit-line-clamp 属性，使用 -webkit-line-clamp 来截断行数，具体 css 代码就是下面这个:

div {
  display: -webkit-box;// 弹性伸缩盒子模型
  -webkit-box-orient: vertical;// 从顶部向底部垂直布置子元素
  overflow: hidden;// 隐藏文本溢出内容
  -webkit-line-clamp: 3;// 截断行数
}

实现过程

1、设置省略样式，动态传入行数来控制文本截断的行数

<div class="text-ellipsis">
  <div 
    ref="contentEl" 
    class="text-ellipsis-content" 
    :style="{ '-webkit-line-clamp': isExpand ? 'unset' : rows }">
    {{content}}
  </div>
</div>

.text-ellipsis-content {
  display: -webkit-box; 
  -webkit-box-orient: vertical; 
  word-break: break-all; 
  overflow: hidden;
}

2、js 判断文本是否溢出

容器的文本内容高度超过容器本身的高度, 就可以判断为文本溢出

const { offsetHeight, scrollHeight } = contentEl.value
isEll.value = scrollHeight > offsetHeight

3、显示展开、收起

文本溢出则显示展开、收起按钮

<span v-if="isEll" class="text-ellipsis-action" @click="onActionClick">{{actionText}}</span>

const actionText = computed(() => {
  return isExpand.value ? props.collapseText : props.expandText
})

// 展开/收起点击
function onActionClick () {
  isExpand.value = !isExpand.value
}

优点