在css中实现文章摘要折叠效果

答案：通过HTML的details与summary标签或checkbox配合CSS可实现文章摘要折叠。使用details标签语义清晰，原生支持展开收起；也可用隐藏checkbox结合:checked和max-height过渡实现动画效果，兼顾可访问性与样式控制，推荐根据场景选择方案。

实现文章摘要的折叠效果，可以通过 CSS 结合 HTML 的结构来完成，无需 JavaScript 也能做到简洁实用。核心思路是利用 :checked 伪类和 <input type=”checkbox”> 或 <details> 标签控制内容的显示与隐藏。

使用 details 和 summary 标签（推荐，语义化强）

HTML 中的 <details> 和 <summary> 原生支持折叠功能，语义清晰，兼容性良好。

示例代码：

<details class="article-summary">
<summary>点击展开文章摘要</summary>
<p>这里是文章的详细摘要内容，可以包含多段文字、链接等。默认状态下被折叠，用户点击后展开。</p>
</details>

CSS 可以美化样式：

.article-summary {
border: 1px solid #ddd;
border-radius: 6px;
padding: 10px;
margin-bottom: 20px;
}
<p>.article-summary summary {
cursor: pointer;
font-weight: bold;
color: #005a9c;
}</p><p>.article-summary p {
margin-top: 10px;
line-height: 1.5;
}

使用 checkbox + label 实现自定义切换

如果需要更灵活的样式控制，可以用隐藏的复选框配合 CSS 隐藏/显示内容。

HTML 结构：

立即学习“前端免费学习笔记（深入）”；

<div class="toggle-summary">
<input type="checkbox" id="toggle" hidden>
<label for="toggle" class="toggle-label">▼ 点击展开摘要</label>
<div class="content">
<p>这里是被折叠的文章摘要内容。点击标签即可展开或收起。</p>
</div>
</div>

CSS 控制显隐：

.toggle-summary .content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
<p>.toggle-summary input:checked ~ .content {
max-height: 200px; /<em> 根据内容调整 </em>/
}</p><p>.toggle-summary .toggle-label {
display: block;
cursor: pointer;
color: #005a9c;
font-size: 14px;
user-select: none;
}</p><p>.toggle-summary input:checked ~ .toggle-label::before {
content: "▲ ";
}
.toggle-summary:not(:has(input:checked)) .toggle-label::before {
content: "▼ ";
}

关键点说明

实现折叠的核心在于控制内容区域的可见性。常用方法包括：

• 使用 max-height 动画模拟展开效果，避免 height: auto 无法过渡的问题
• 用 hidden 属性或 display: none 完全隐藏内容
• 结合 :checked 和兄弟选择器（~）触发状态变化
• 注意可访问性，为交互元素添加适当的语义和焦点支持

基本上就这些。用 <details> 最简单，适合大多数场景；若需动画或复杂样式，可用 checkbox 方案。不复杂但容易忽略细节。