纯CSS实现多行文本”展开收起”：从原理到实践

在Web开发中，文本溢出处理是常见需求。当内容超出容器高度时，传统做法是使用JavaScript控制显示状态，但纯CSS方案能显著提升性能并简化代码。本文将深入探讨如何通过CSS实现多行文本的展开收起功能，覆盖从基础原理到高级优化的完整路径。

一、核心原理：CSS多行文本溢出控制

实现展开收起功能的核心在于精确控制文本的显示行数。CSS提供了line-clamp属性（需配合display: -webkit-box），可限制元素内文本的显示行数。当文本超出指定行数时，自动显示省略号（...）。

.text-container {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

原理说明：

display: -webkit-box将元素设为弹性盒模型，支持垂直方向布局。
-webkit-line-clamp指定最大显示行数，超出部分隐藏。
overflow: hidden确保溢出内容不可见。
-webkit-box-orient: vertical强制文本垂直排列，使行数限制生效。

局限性：

仅支持WebKit内核浏览器（Chrome、Safari等），需添加@supports检测或提供备用方案。
无法直接通过CSS切换展开状态，需结合max-height过渡动画。

二、纯CSS展开收起实现方案

方案1：利用`max-height`过渡动画

通过切换max-height值并配合transition，可实现平滑的展开收起效果。关键点在于设置一个足够大的max-height值（如999px），确保内容完全展开。

.text-wrapper {
  max-height: 60px; /* 初始高度（3行文本高度） */
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.text-wrapper.expanded {
  max-height: 999px; /* 展开后的高度 */
}

实现步骤：

默认状态设置较小的max-height（如60px，对应3行文本高度）。
展开状态设置较大的max-height（如999px），确保容纳所有内容。
通过:checked伪类或details/summary标签切换状态。

示例：使用details/summary标签

<details class="text-details">
  <summary>展开/收起</summary>
  <div class="text-content">
    这里是多行文本内容...
  </div>
</details>
<style>
  .text-details > summary {
    cursor: pointer;
    list-style: none;
  }
  .text-details > summary::-webkit-details-marker {
    display: none;
  }
  .text-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .text-details[open] .text-content {
    max-height: 999px;
  }
</style>

方案2：结合`:checked`伪类与隐藏输入

通过隐藏的checkbox输入框和:checked伪类，可实现无JavaScript的展开收起控制。

<div class="toggle-container">
  <input type="checkbox" id="toggle" hidden>
  <label for="toggle">展开/收起</label>
  <div class="text-block">
    这里是多行文本内容...
  </div>
</div>
<style>
  .text-block {
    max-height: 60px;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  #toggle:checked + label + .text-block {
    max-height: 999px;
  }
</style>

优势：

完全纯CSS实现，无需JavaScript。
兼容性较好，支持现代浏览器。

注意事项：

需精确计算初始max-height（如通过line-height * 行数）。
展开状态需设置足够大的max-height，避免内容截断。

三、高级优化策略

1. 动态计算初始高度

为提升适应性，可通过CSS变量动态设置初始高度：

:root {
  --line-height: 1.5;
  --visible-lines: 3;
}
.text-container {
  max-height: calc(var(--line-height) * 1em * var(--visible-lines));
  line-height: var(--line-height);
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.text-container.expanded {
  max-height: 999px;
}

2. 兼容性处理

针对非WebKit浏览器，需提供备用方案：

.text-container {
  display: block; /* 备用方案：不限制行数 */
  max-height: none;
}
@supports (display: -webkit-box) {
  .text-container {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}

3. 动画性能优化

使用will-change: max-height提示浏览器优化动画。
避免在动画中使用height属性（需计算内容高度），优先使用max-height。
对于复杂内容，可设置固定的max-height值（如500px），而非999px。

四、实际应用场景

1. 文章摘要与详情

在博客或新闻网站中，可通过展开收起功能控制文章摘要的显示：

<article class="article-card">
  <h2>文章标题</h2>
  <div class="article-summary">
    <input type="checkbox" id="article-toggle" hidden>
    <label for="article-toggle" class="toggle-label">展开全文</label>
    <div class="summary-content">
      这里是文章摘要内容...
      <div class="full-content">这里是完整内容...</div>
    </div>
  </div>
</article>
<style>
  .summary-content {
    max-height: 60px;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  #article-toggle:checked + .toggle-label + .summary-content {
    max-height: 999px;
  }
  .toggle-label {
    color: #0066cc;
    cursor: pointer;
    display: inline-block;
    margin-top: 8px;
  }
</style>

2. 评论系统

在评论列表中，长评论可默认折叠，用户点击后展开：

.comment-body {
  max-height: 48px; /* 2行文本高度 */
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.comment-toggle:checked ~ .comment-body {
  max-height: 999px;
}

五、总结与建议

优先使用max-height过渡：相比height动画，max-height性能更好且无需计算内容高度。
合理设置初始高度：通过line-height * 行数计算初始max-height，确保显示指定行数。
提供兼容性方案：使用@supports检测-webkit-line-clamp支持情况，为不支持的浏览器提供备用样式。
优化动画性能：添加will-change: max-height，避免在动画中使用height属性。
考虑无障碍性：为切换按钮添加aria-expanded属性，提升可访问性。

通过纯CSS实现多行文本的展开收起功能，不仅能减少JavaScript依赖，还能提升页面性能。开发者可根据实际需求选择合适的方案，并结合优化策略提升用户体验。

纯CSS实现多行文本"展开收起"：从原理到实践