多行溢出省略号显示及点击展开（css/js）的实现方法

2024-01-27 06:07:32

多行溢出省略号显示及点击展开（css/js）的实现

概述

在网页设计中，经常需要处理多行文本溢出的问题，例如在商品列表、新闻摘要、评论区等场景中。为了保持页面的美观性和易读性，通常需要对多行文本进行省略号显示，并提供点击展开和收起的功能。本文将详细介绍如何使用css和js实现此功能。

实现步骤

1. 设置行高

首先，我们需要设置文本的行高，以便控制文本在垂直方向上的显示空间。行高可以通过css的line-height属性设置，单位可以是像素（px）、百分比（%）或无单位。例如：

.text-container {
  line-height: 1.5rem;
}

2. 设置文本溢出

接下来，我们需要设置文本的溢出方式，以便控制当文本内容超过容器的高度时如何显示。可以通过css的text-overflow属性设置文本的溢出方式。常用的值有以下几个：

clip: 文本被剪裁，超出容器的部分被隐藏。
ellipsis: 文本被截断，并在末尾显示省略号。
hidden: 文本被隐藏，超出容器的部分不会显示。

例如：

.text-container {
  text-overflow: ellipsis;
}

3. 显示省略号

为了在文本末尾显示省略号，我们需要使用css的overflow属性。overflow属性可以设置元素的内容如何超出其容器。当overflow属性设置为hidden时，超出容器的内容将被隐藏。我们可以利用这一点来隐藏文本末尾的省略号。

.text-container {
  overflow: hidden;
}

4. 点击展开和收起

最后，我们需要实现点击展开和收起的交互效果。可以通过js的addEventListener()方法为元素添加点击事件监听器。当元素被点击时，我们可以通过js的classList.toggle()方法切换元素的类名，从而实现展开和收起的效果。

const textContainer = document.querySelector('.text-container');

textContainer.addEventListener('click', () => {
  textContainer.classList.toggle('expanded');
});

5. 完整代码

<div class="text-container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus ullamcorper. Nunc eget lacus eget nunc luctus ullamcorper. Nunc eget lacus eget nunc luctus ullamcorper. Nunc eget lacus eget nunc luctus ullamcorper.
  </p>
</div>

.text-container {
  line-height: 1.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
}

.text-container.expanded {
  overflow: visible;
}

const textContainer = document.querySelector('.text-container');

textContainer.addEventListener('click', () => {
  textContainer.classList.toggle('expanded');
});

注意事项

在使用此方法时，需要注意以下几点：
- 确保元素的高度和宽度是固定的，否则文本可能会出现错位或重叠。
- 如果文本内容较多，可能会导致性能问题。
- 在某些情况下，此方法可能会导致文本被截断得不够美观。

替代方案

除了使用css和js实现多行溢出省略号显示及点击展开的功能外，还有一些其他的替代方案：

使用html的<details>元素：<details>元素可以用来创建可折叠的文本内容，点击<summary>元素可以展开或收起<details>元素的内容。
使用第三方库：有一些第三方库可以帮助您轻松实现此功能，例如jQuery的ellipsis()插件。
使用css grid：可以使用css grid来创建多列文本布局，并在需要时隐藏多余的文本内容。