使用CSS实现多行文本展开收起效果

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

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