CSS 实现展开收起效果

超出 3 行显示省略号末尾拼接展开按钮

提示

以下代码在微信小程序中也适用

提示 1

该方案并没有解决小于 3 行不显示省略号的问题，不过你可以通过根据字符个数来判断是否显示展开收起的按钮，这里有一个缺点就是，有可能会出现无须折叠的时候出现了展开按钮（参考第 8 例子）。

提示 2

如果以下例子不符合你的需求，换一个解决方案也许更简单一些，就是根据字符的个数来判断是否显示展开和收起按钮，展开和收起按钮是紧跟在文案后面，这个就不提供例子了，可以自行实现，抖音评论区就是这么做的。

1. 中文效果（大于 3 行）

展开前端开发不仅仅是编写代码，还包括用户体验的设计、界面的美观与实用性等。每一个功能模块的背后，都有无数次的设计和调整。随着现代浏览器的发展，Web 技术也在不断更新，从 HTML5 到 CSS3，从 ES6 到如今的 Vue、React 等前端框架，每一个技术的更新都在推动着前端的发展。而开发者不仅要掌握这些新技术，还需要不断学习，以应对复杂的项目需求。

<TextWrapperEffect :text="textContent" />

2. 英文效果（大于 3 行）

展开In a campaign otherwise light on policy specifics, Vice President Kamala Harris this week quietly rolled out her most detailed, far-ranging proposal yet: nearly $5 trillion in tax increases over a decade. That’s how much more revenue the federal government will raise if it adopted a number of tax increases that President Biden proposed in the spring. Ms. Harris’s campaign said this week that she supported those tax hikes, which were thoroughly laid out in the most recent federal budget plan prepared by the Biden administration.

<TextWrapperEffect :text="textContent2" />

3. 英文效果（大于 3 行） 默认展开

In a campaign otherwise light on policy specifics, Vice President Kamala Harris this week quietly rolled out her most detailed, far-ranging proposal yet: nearly $5 trillion in tax increases over a decade. That’s how much more revenue the federal government will raise if it adopted a number of tax increases that President Biden proposed in the spring. Ms. Harris’s campaign said this week that she supported those tax hikes, which were thoroughly laid out in the most recent federal budget plan prepared by the Biden administration. 收起

<TextWrapperEffect :text="textContent2" :defaultExpanded="true" />

4. 英文效果（大于 3 行） 隐藏展开或者收起功能

In a campaign otherwise light on policy specifics, Vice President Kamala Harris this week quietly rolled out her most detailed, far-ranging proposal yet: nearly $5 trillion in tax increases over a decade. That’s how much more revenue the federal government will raise if it adopted a number of tax increases that President Biden proposed in the spring. Ms. Harris’s campaign said this week that she supported those tax hikes, which were thoroughly laid out in the most recent federal budget plan prepared by the Biden administration.

<TextWrapperEffect
  :showExpanded="false"
  :text="textContent2"
  :defaultExpanded="true"
/>

5. 英文效果（大于 3 行） 隐藏展开或者收起功能 - 收起 - 自定义两行出现省略号

In a campaign otherwise light on policy specifics, Vice President Kamala Harris this week quietly rolled out her most detailed, far-ranging proposal yet: nearly $5 trillion in tax increases over a decade. That’s how much more revenue the federal government will raise if it adopted a number of tax increases that President Biden proposed in the spring. Ms. Harris’s campaign said this week that she supported those tax hikes, which were thoroughly laid out in the most recent federal budget plan prepared by the Biden administration.

<TextWrapperEffect
  style="--custom-line-clamp: 2;"
  :showExpanded="false"
  :text="textContent2"
  :defaultExpanded="false"
/>

6. 英文效果（大于 100 个字符，才启用展开或者收起功能） - 533 个字符

展开In a campaign otherwise light on policy specifics, Vice President Kamala Harris this week quietly rolled out her most detailed, far-ranging proposal yet: nearly $5 trillion in tax increases over a decade. That’s how much more revenue the federal government will raise if it adopted a number of tax increases that President Biden proposed in the spring. Ms. Harris’s campaign said this week that she supported those tax hikes, which were thoroughly laid out in the most recent federal budget plan prepared by the Biden administration.

<TextWrapperEffect :showExpanded="textContent2.length > 100" :text="textContent2" :defaultExpanded="textContent2.length > 100 ? false: true" />

7. 英文效果（大于 100 个字符，才启用展开或者收起功能） - 100 个字符

In a campaign otherwise light on policy specifics,In a campaign otherwise light on policy specifics.

<TextWrapperEffect :showExpanded="textContent5.length > 100" :text="textContent5"  :defaultExpanded="textContent5.length > 100 ? false: true" />

7. 英文效果（大于 100 个字符，才启用展开或者收起功能） - 101 个字符

展开In a campaign otherwise light on policy specifics,In a campaign otherwise light on policy specifics.1

<TextWrapperEffect
  :showExpanded="(textContent5 + '1').length > 100"
  :text="textContent5 + '1'"
  :defaultExpanded="(textContent5 + '1').length > 100 ? false : true"
/>

8. 英文效果（小于 3 行）

展开In a campaign otherwise light on policy specifics, Vice President Kamala Harris this week quietly rolled out her most detailed, far-ranging proposal yet: nearly $5 trillion in tax increases over a decade.

<TextWrapperEffect :text="textContent3" />

9. 英文效果（超长单词） - 自定义两行出现省略号

展开aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

<TextWrapperEffect style="--custom-line-clamp: 2;" :text="textContent4" />

Vue3 代码实现

TextWrapperEffect.vue 组件代码

<template>
  <div v-show="text" class="content">
    <div class="text" :class="{ isExpanded }">
      <label class="btn" @click="expandText" v-if="!isExpanded && showExpanded"
        >展开</label
      >
      <span>
        {{ text }}
        <label class="btn" @click="expandText" v-if="isExpanded && showExpanded"
          >收起</label
        >
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  text: { type: String, default: "" }, // 显示的文案
  defaultExpanded: { type: Boolean, default: false }, // 默认展开、或者收起
  showExpanded: { type: Boolean, default: true }, // 是否开启展开或者收起功能
});

const isExpanded = ref(props.defaultExpanded);

const expandText = () => {
  isExpanded.value = !isExpanded.value;
};

defineExpose({ isExpanded, expandText });
</script>

<style scoped>
.content {
  display: flex;
}

.content .text {
  word-break: break-all;
}
.content .text::before {
  content: "";
  float: right;
  height: 100%;
  margin-bottom: -1.5em;
}

.content .text:not(.isExpanded) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: var(--custom-line-clamp, 3);
  -webkit-box-orient: vertical;
}

.content .text:not(.isExpanded) .btn {
  float: right;
  clear: both;
  margin-right: 8px;
  cursor: pointer;
}

.content .text .btn {
  color: dodgerblue;
}
</style>

Vue3 代码使用

<script setup>
import TextWrapperEffect from "./TextWrapperEffect.vue";

const textContent = `前端开发不仅仅是编写代码，还包括用户体验的设计、界面的美观与实用性等。每一个功能模块的背后，都有无数次的设计和调整。随着现代浏览器的发展，Web 技术也在不断更新，从 HTML5 到 CSS3，从 ES6 到如今的 Vue、React 等前端框架，每一个技术的更新都在推动着前端的发展。而开发者不仅要掌握这些新技术，还需要不断学习，以应对复杂的项目需求。`;

const textContent2 = `In a campaign otherwise light on policy specifics, Vice President Kamala Harris this week quietly rolled out her most detailed, far-ranging proposal yet: nearly $5 trillion in tax increases over a decade.
That’s how much more revenue the federal government will raise if it adopted a number of tax increases that President Biden proposed in the spring. Ms. Harris’s campaign said this week that she supported those tax hikes, which were thoroughly laid out in the most recent federal budget plan prepared by the Biden administration.`;

const textContent3 = `In a campaign otherwise light on policy specifics, Vice President Kamala Harris this week quietly rolled out her most detailed, far-ranging proposal yet: nearly $5 trillion in tax increases over a decade.`;

const textContent4 = `aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa`;

const textContent5 = `In a campaign otherwise light on policy specifics,In a campaign otherwise light on policy specifics.`;
</script>

html 源码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文字包围效果示例</title>
    <style>
      .content {
        display: flex;
      }
      .text::before {
        content: "";
        float: right;
        height: 100%;
        margin-bottom: -20px;
      }
      .btn {
        float: right;
        clear: both;
        margin-right: 8px;
        color: dodgerblue;
        cursor: pointer;
      }

      .text {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="text">
        <label class="btn" for="exp">展开</label>
        <span>
          前端开发不仅仅是编写代码，还包括用户体验的设计、界面的美观与实用性等。
          每一个功能模块的背后，都有无数次的设计和调整。随着现代浏览器的发展，Web
          技术也在不断更新， 从 HTML5 到 CSS3，从 ES6 到如今的 Vue、React
          等前端框架，每一个技术的更新都在推动着前端的发展。
          而开发者不仅要掌握这些新技术，还需要不断学习，以应对复杂的项目需求。</span
        >
      </div>
    </div>
  </body>
</html>

参考来源

CSS 实现多行文本展开收起效果 https://www.cnblogs.com/niejunchan/p/15078198.html