轻松搞定文字超出省略，展开收起效果【React/Vue适用】

2023-10-17 09:16:45

在网页设计中，有效地处理文本的显示和隐藏是一个常见的需求，尤其是在需要节省空间或者提供更多交互性的场景下。本文将详细介绍如何使用CSS来实现文本的省略和展开收起效果，这一技巧不仅适用于传统的网页设计，也同样适用于React和Vue等现代前端框架。

一、文本超出省略：让冗长文本简洁明了

当文本长度超过容器宽度时，我们通常希望以一种优雅的方式展示这些文本，而不是简单地让它们换行。这时，CSS的text-overflow属性就可以派上用场了。

实现方法

要实现文本超出省略效果，你需要做以下几步：

设置文本宽度：使用width或max-width属性来限制文本的宽度。
应用省略号：通过设置text-overflow: ellipsis，文本超出部分会显示为省略号。
文本对齐：使用text-align属性来确保省略号出现在文本的最后。

示例代码

.text {
  width: 200px; /* 设置文本宽度 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /* 不折行 */
  overflow: hidden; /* 隐藏超出部分 */
}

<div class="text">
  这是一段很长的文本，当它超过容器宽度时，它会自动省略并显示省略号(...)。
</div>

二、展开收起：灵活切换文本内容

有时，你可能需要一个按钮或链接来手动展开或收起文本内容。这种交互在很多场合都非常有用，比如文章详情页、列表项等。

实现方法

添加按钮或链接：创建一个按钮或链接，用于触发展开/收起操作。
事件监听：为按钮添加点击事件监听器，当按钮被点击时，执行相应的函数。
CSS类切换：使用JavaScript来切换CSS类，从而改变元素的显示状态。

示例代码

<div class="text" id="text">
  这是一段很长的文本，当它超过容器宽度时，它会自动省略并显示省略号(...)。
</div>
<button class="button" onclick="toggleText()">展开/收起</button>

<script>
function toggleText() {
  const textElement = document.getElementById('text');
  textElement.classList.toggle('open');
}
</script>

.text {
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.text.open {
  white-space: normal; /* 允许文本折行 */
  overflow: visible; /* 显示所有内容 */
}

三、React/Vue中的展开收起实现

在前端框架中，如React和Vue，我们可以利用框架的状态管理来实现展开收起效果。

React示例

在React中，你可以使用组件的状态来控制文本的显示和隐藏。

import React, { useState } from 'react';

function TextComponent() {
  const [isExpanded, setIsExpanded] = useState(false);

  function toggleText() {
    setIsExpanded(!isExpanded);
  }

  return (
    <div>
      <div className={`text ${isExpanded ? 'open' : ''}`}>
        这是一段很长的文本，当它超过容器宽度时，它会自动省略并显示省略号(...)。
      </div>
      <button onClick={toggleText}>展开/收起</button>
    </div>
  );
}

export default TextComponent;

Vue示例

在Vue中，你可以使用组件的数据属性来控制文本的显示和隐藏。

<template>
  <div>
    <div class="text" :class="{ open: isExpanded }">
      这是一段很长的文本，当它超过容器宽度时，它会自动省略并显示省略号(...)。
    </div>
    <button @click="toggleText">展开/收起</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false
    };
  },
  methods: {
    toggleText() {
      this.isExpanded = !this.isExpanded;
    }
  }
};
</script>

<style>
.text {
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.text.open {
  white-space: normal;
  overflow: visible;
}
</style>