line-clamp 不适用于真实 HTML 内容截断，因其仅视觉裁剪、不兼容 IE、易截断标签内部或单词中间；需用 JS 逐字符回退+安全节点判断实现语义化截断，并动态插入带 aria 属性的“展开更多”按钮。
多行截断加“展开更多”不能只靠 CSS line-clamp 一招鲜——它不兼容 IE，且无法精准控制截断位置（比如卡在单词中间、HTML 标签里断开），实际项目中必须配合 JS 做语义化截断。
为什么 line-clamp 在真实 HTML 内容里容易出问题
它只是视觉裁剪，不处理 DOM 结构。当文本含 <span>、<em> 或换行符 <br> 时，line-clamp 可能截在标签内部，导致渲染异常或 DOM 损坏；另外，它对中英文混排、全角空格、零宽空格等场景无感知，截断点常出现在不该断的位置。
- 测试发现：同一段含
<strong>重点</strong>的文字，在 Chrome 和 Safari 下截断行数可能不一致 - 移动端 WebView（如微信内置）部分版本会忽略
display: -webkit-box，直接失效 - 无法获知“实际截断在哪一行”，所以“展开更多”按钮没法动态计算剩余内容高度
用 JS 做语义化截断：核心是逐字符/词回退 + 安全节点判断
思路不是数行高，而是模拟渲染后测量容器高度，再从末尾逐步删减内容，直到高度 ≤ 目标行高 × 行数，并确保不切断内联元素。
- 用
getClientRects()获取每行的bottom，比单纯offsetHeight更准 - 优先按 Unicode 字符边界（
Intl.Segmenter）或空格/标点切分，避免中英文混切 - 遍历子节点时跳过
Element类型节点（如<img>、<a>），只对Text节点做截断 - 示例关键逻辑：
function truncate(el, maxLines) { const lineHeight = parseFloat(getComputedStyle(el).lineHeight); const maxHeight = lineHeight * maxLines; let textNode = el.firstChild; while (textNode && textNode.nodeType !== Node.TEXT_NODE) textNode = textNode.nextSibling; if (!textNode) return; let fullText = textNode.textContent; let truncated = fullText; while (el.scrollHeight > maxHeight && truncated.length > 0) { truncated = truncated.slice(0, -1); textNode.textContent = truncated + '…'; } }
“展开更多”按钮的 DOM 插入时机和可访问性要点
按钮不能硬写死在 HTML 里——它得由 JS 判断是否真有被截断才插入，否则影响 SEO 和屏幕阅读器体验。
立即学习“前端免费学习笔记（深入）”；
- 插入位置必须紧邻被截断容器之后，且用
aria-expanded和aria-controls关联目标区域 - 点击展开时，应恢复原始
textContent或用innerHTML重建（若原内容含标签），而非简单移除… - 避免用
display: none隐藏原文本——用visibility: hidden+height: 0+overflow: hidden更利于动画过渡 - 注意：如果原文本含
<script>或事件绑定，直接恢复innerHTML会丢失行为，此时应缓存原始 DOM 片段而非字符串
真正难的不是截断本身，而是怎么在保留原有样式、事件、无障碍支持的前提下，让“展开”前后 DOM 状态完全可逆——多数线上方案在这一步悄悄漏掉了 Text 节点与 Element 节点的混合处理逻辑。
