纯 CSS 无法实现点击展开，需借助 details 元素或 :checked 伪交互；details + summary 最接近纯 CSS 方案，需用 .content 套盒并设置 -webkit-line-clamp，展开时重置为 unset；:checked 方案兼容性更好，但需隐藏复选框并用 max-height 过渡，line-clamp 本身不支持动画。
用 line-clamp 实现多行截断但不支持点击展开？
纯 CSS 本身没有“点击触发状态切换”的能力，line-clamp 只能静态控制显示行数，无法响应点击。所以严格来说，“纯 CSS 实现点击展开”在语义上不成立——你必须借助 HTML 的 details 元素或 :checked + 隐藏复选框这类“伪交互”技巧，CSS 负责样式和过渡，行为逻辑由 HTML 结构兜底。
details + summary 是最接近“纯 CSS”的方案
它原生支持展开/收起，无需 JS，且可被 CSS 完全定制外观。关键点在于重置默认样式并处理多行截断逻辑：
-
summary默认是块级、带箭头、会换行，需用display: inline或display: flex控制布局 - 收起状态下，用
line-clamp截断正文；展开后要取消截断，可用details[open] .content { display: block; -webkit-line-clamp: none; } - Chrome/Firefox 支持
line-clamp，Safari 16.4+ 才支持display: -webkit-box方式，旧 Safari 需降级为单行截断或 JS 备用 - 不能直接对
details设置line-clamp，必须套一层div class="content"并设display: -webkit-box
<details><summary>点击查看</summary><div class="content">这里是超长文本……</div>
</details>
.content {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
details[open] .content {
-webkit-line-clamp: unset;
}
用隐藏复选框 + :checked 模拟开关（兼容性更好）
适合需要自定义按钮文字、或必须支持老版 Safari 的场景。核心是把 input[type="checkbox"] 视觉隐藏，用 label 触发，再用 :checked ~ .content 控制样式：
-
input必须放在.content前面（才能用兄弟选择器），且加position: absolute; opacity: 0;隐藏 - 收起时
.content设-webkit-line-clamp: 2；input:checked ~ .content中重置为none并加max-height: 500px（避免突然撑开抖动） - 过渡动画只能作用于
max-height或opacity，不能对line-clamp做动画（它不支持过渡） - 注意：若内容高度差异大，
max-height设太小会裁剪，设太大则动画慢；建议用 JS 动态写入高度，但这就脱离“纯 CSS”了
为什么不用 height: 0 + overflow: hidden？
这是常见误区。直接设 height: 0 会导致文字被强制压扁（尤其中文），且 line-clamp 在 height: 0 下失效；而 max-height 配合 overflow: hidden 才能自然截断。另外：transition 对 height 不友好（需预知目标高度），max-height 更可控但仍有精度问题——比如设 max-height: 10em，实际内容只占 8em，动画末尾会多等 2em 时间。
真正难的不是写法，是怎么让截断行数刚好卡在语义断点（比如不把“因为……所以……”拆到两行），以及怎么在各种字体大小、行高、缩放比例下保持稳定——这些靠 CSS 很难兜住，往往得靠 JS 测量行高再计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
