妙用CSS，轻松实现多行文本展开收起功能

2023-03-17 04:38:47

利用 CSS 和 JavaScript 实现多行文本展开和收起功能

在现代网络浏览中，多行文本随处可见，特别是在文章阅读、长篇段落和产品详情页中。为了提升用户体验，开发者经常需要实现多行文本的展开和收起功能，让用户根据自身需求控制文本显示长度。本文将深入剖析如何利用 CSS 和 JavaScript 实现这一功能。

如何实现多行文本展开和收起？

实现多行文本展开和收起功能，主要分两大步骤：

实现多行文本溢出省略效果

要实现多行文本溢出时显示省略号 (...) 的效果，可以使用 text-overflow: ellipsis 属性。同时，还需要使用 white-space: nowrap 属性禁止文本换行，以便多行文本在一行内显示。
实现展开和收起切换按钮的文字环绕

展开和收起按钮的文字和图标需要放在同一个容器中，可以使用 display: flex 属性实现。接着，使用 flex-direction: row 属性设置水平排列，再利用 align-items: center 属性垂直居中对齐文字和图标。

具体实现步骤

HTML 结构

首先，创建一个包含多行文本的元素，例如 <p> 或 <div>。然后，创建一个按钮元素，用于触发文本展开和收起操作。
CSS 样式

接下来，为多行文本元素添加 CSS 样式，包括实现溢出省略效果的 text-overflow: ellipsis 和禁止换行的 white-space: nowrap。
按钮样式

为按钮元素添加 CSS 样式，包括使用 display: flex 将文字和图标放入同一个容器，利用 flex-direction: row 实现水平排列，再通过 align-items: center 垂直居中对齐。
JavaScript 脚本

最后，使用 JavaScript 脚本实现按钮的点击事件。在点击事件中，使用 classList.toggle() 方法切换多行文本元素的 CSS 类，从而实现文本的展开和收起操作。

示例代码

下面是实现多行文本展开和收起功能的示例代码：

<p id="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

<button id="button">
  展开/收起
</button>

#text {
  text-overflow: ellipsis;
  white-space: nowrap;
}

#button {
  display: flex;
  flex-direction: row;
  align-items: center;
}

const text = document.getElementById('text');
const button = document.getElementById('button');

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

结论

通过灵活运用 CSS 和 JavaScript，可以轻松实现多行文本的展开和收起功能。该功能在实际开发中十分实用，能够有效提升用户体验。

常见问题解答