一、前言

在文章阅读、持续段落、多行文本等场景中经常会遇到有展开收起的需求操作，今天使用CSS实现一下具体的实现流程。

二、实现思路

实现多行文本溢出省略效果
实现 展开 和 收起 切换按钮的文字环绕效果
实现 展开 和 收起 的状态切换

三、代码解析

xml 复制代码

<template>
  <!-- 此处为最外层盒子需要开启弹性盒子，用于后续伪元素的高度计算 -->
  <div class="box">
    <!-- 此处为文本区域，类名text多行文本溢出显示省略号，变量btnFlag控制要显示的行数 -->
    <div
      ref="textRef"
      :class="['text-cont', btnFlag ? 'text-unfold' : 'text-collapse']"
    >
      <!-- 此处为按钮区域，类名unfold-and-collapse控制浮动实现文字包裹按钮，事件控制btnFlag及按钮文字的变化 -->
      <div class="unfold-and-collapse" @click="btnFlagChange">
        {{ !btnFlag ? "展开" : "收起" }}
      </div>
      <!-- 首行缩进句尾不可控，使用&emsp;用于顶位 -->
      &emsp;&emsp;{{ text }}
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, watch, computed, defineProps } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const store = useStore();
const data = reactive({
  // 文本内容
  text: "我们可以度过美好时光，也可以虚度光阴，但我希望你活得精彩。我希望你能看到令你惊叹的事物，我希望你遇见具有不同观点的人，我希望你的一生能让自己过得自豪。如果你发现你的生活并非如此，我希望你能有勇气重新来过。 你是独特的，但你必须向统一让步；你是自由的，但你必须向禁忌妥协。因为你渴望亲近群体，渴望他们的接受。你害怕被群体驱逐。因而你是孤独的，你是独特但孤独的心魂。生来如此。生，就是这样，永远都是这样。",
  // 展开收起状态
  btnFlag: false,
});
const textRef = ref();
// 展开收起事件
const btnFlagChange = () => {
  data.btnFlag = !data.btnFlag;
};
const { text, btnFlag } = toRefs(data);
</script>
<style scoped lang="scss">
// 最外层开启弹性盒子，用于伪元素的高度计算
.box {
  display: flex;
}
// 文本区域设置宽度，显示省略号
.text-cont {
  width: 300px;
  margin: 20px auto 0;
  display: -webkit-box;
  /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
  -webkit-box-orient: vertical;
  /* 溢出部分隐藏 */
  overflow: hidden;
  // 首行缩进
  // text-indent: 2em;
  // 文字居左
  text-align: left;
}
/*text-unfold与text-collapse控制要显示的行数*/
.text-unfold {
  /*要显示的行数*/
  -webkit-line-clamp: 9999;
}
.text-collapse {
  /*要显示的行数*/
  -webkit-line-clamp: 3;
}
// 浮动实现文字包裹按钮
.unfold-and-collapse {
  color: #19aaff;
  float: right;
  clear: both;
  margin-right: 10px;
}
// 伪元素用于实现文字包裹按钮
.text-cont::before {
  content: "";
  float: right;
  width: 0;
  height: calc(100% - 20px);
  // background: red;
}
</style>

CSS 实现多行文本展开收起

一、前言

二、实现思路

三、代码解析