文本折叠技巧：如何利用纯CSS实现文本的展开和收起

2023-09-05 11:24:16

前言

在现代网页设计中，节省空间和优化用户体验至关重要。文本折叠是一种巧妙的技术，可以隐藏不必要的文本信息，只在用户需要时显示。本文将指导您使用纯CSS实现文本折叠效果，并确保按钮始终位于文本的右下角。

正文

一、按钮位置固定

1. 让按钮右浮动

首先，我们需要让按钮浮动到文本的右侧。为此，在CSS中添加以下代码：

button {
  float: right;
}

2. 确保按钮在上侧

为了让按钮保持在上侧，我们需要添加以下代码：

button {
  vertical-align: top;
}

二、文本折叠效果

1. 隐藏默认文本

使用以下CSS代码隐藏默认文本：

p {
  overflow: hidden;
}

2. 添加“展开”按钮

创建带有以下代码的“展开”按钮：

<button id="show-more">展开</button>

3. 添加“收起”按钮

创建带有以下代码的“收起”按钮：

<button id="show-less">收起</button>

三、使用JavaScript切换文本

使用以下JavaScript代码切换文本的可见性：

document.getElementById("show-more").addEventListener("click", function() {
  document.querySelector("p").style.overflow = "visible";
  this.style.display = "none";
  document.getElementById("show-less").style.display = "inline";
});

document.getElementById("show-less").addEventListener("click", function() {
  document.querySelector("p").style.overflow = "hidden";
  this.style.display = "none";
  document.getElementById("show-more").style.display = "inline";
});

四、代码示例

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc tincidunt laoreet. Nunc eget lacus eget nunc tincidunt laoreet. Maecenas eget lacus eget nunc tincidunt laoreet. Nunc eget lacus eget nunc tincidunt laoreet.</p>

<button id="show-more">展开</button>
<button id="show-less" style="display: none;">收起</button>

p {
  overflow: hidden;
}

button {
  float: right;
  vertical-align: top;
}

document.getElementById("show-more").addEventListener("click", function() {
  document.querySelector("p").style.overflow = "visible";
  this.style.display = "none";
  document.getElementById("show-less").style.display = "inline";
});

document.getElementById("show-less").addEventListener("click", function() {
  document.querySelector("p").style.overflow = "hidden";
  this.style.display = "none";
  document.getElementById("show-more").style.display = "inline";
});