CSS魔法：如何实现多行文本的展开与收起

# 01CSS 实现多行文本“展开收起”

**引言：**

在Web前端开发中，文本内容的展示与交互常常扮演着至关重要的角色。特别是在信息爆炸的时代，合理有效地组织和展示文本信息显得尤为关键。本文将聚焦一种常见的交互效果——多行文本的“展开收起”，并详细探讨如何仅使用CSS实现这一效果。我们将通过实战代码剖析其原理，以期帮助读者更好地理解和应用这一技术，优化用户体验。

---

### **一、基础实现：CSS ellipsis和max-height**

**标题：** 初识`text-overflow: ellipsis`与`max-height`

在实现“展开收起”功能之前，我们先要了解如何用CSS实现多行文本省略的效果。以下是一个简单的例子：

```html

<div class="expand-collapse-text">

这是一段很长很长的文本，可能会超过显示区域，此时就需要截断显示...

</div>

<style>

.expand-collapse-text {

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3; /* 行数 */

-webkit-box-orient: vertical;

line-height: 1.5em;

max-height: 4.5em; /* 根据行高设置最大高度 */

}

</style>

```

上述CSS代码设置了多行文本截断效果，当文本超过指定的行数时，多余的文本会被替换为省略号“...”。

---

### **二、进阶实现：“展开收起”按钮与状态切换**

**标题：** 结合JavaScript实现动态切换

接下来，我们将通过JavaScript动态改变CSS属性，实现文本的“展开”与“收起”功能。首先，我们需要一个按钮和相应的事件监听：

```html

<div class="expand-collapse-text" id="content">

这是一段很长很长的文本，可能会超过显示区域，此时就需要截断显示...

<button id="toggle-btn">展开</button>

</div>

<script>

const textContainer = document.getElementById('content');

const toggleBtn = document.getElementById('toggle-btn');

// 默认收起状态

textContainer.style.maxHeight = '4.5em';

toggleBtn.addEventListener('click', () => {

if (textContainer.style.maxHeight === 'none') {

textContainer.style.maxHeight = '4.5em';

toggleBtn.textContent = '展开';

} else {

textContainer.style.maxHeight = 'none';

toggleBtn.textContent = '收起';

}

});

</script>

```

上述代码中，我们首先获取到了文本容器和按钮元素，并设置文本容器的初始`max-height`。然后，为按钮添加点击事件监听器，根据`max-height`属性判断当前状态，切换文本容器的`max-height`值以及按钮的文本内容。

---

### **三、CSS动画与过渡效果**

**标题：** 添加过渡动画提升用户体验

为了让“展开收起”过程更加平滑，我们可以加入CSS过渡动画：

```css

.expand-collapse-text {

/* ...前面的样式不变... */

transition: max-height 0.3s ease;

}

```

这样，当`max-height`属性发生改变时，文本容器的高度会以0.3秒的过渡时间逐渐变化，形成平滑的展开或收起动画。

---

### **四、无障碍设计与辅助功能**

**标题：** 考虑无障碍访问与ARIA标签

为了提升无障碍访问体验，可以在按钮上添加`aria-expanded`属性，并随状态切换更新其值：

```html

<button id="toggle-btn" aria-expanded="false">展开</button>

```

在JavaScript中，同步更新`aria-expanded`属性：

```javascript

toggleBtn.addEventListener('click', () => {

// ...之前的逻辑不变...

// 更新aria-expanded属性

toggleBtn.setAttribute('aria-expanded', textContainer.style.maxHeight === 'none');

});

```

---

**结语：**

通过以上步骤，我们已经成功实现了纯CSS+JavaScript的多行文本“展开收起”功能，并且注重了过渡动画和无障碍设计的考量。这种交互效果在很多场合都非常实用，如新闻摘要、用户评论、产品详情等。掌握这一技术，不仅可以提升页面的交互体验，还能彰显出作为一名前端开发者对细节的关注和专业素养。持续优化和改进此类交互效果，将有助于我们更好地服务用户，提升产品的整体品质。