需用 JavaScript 控制 line-clamp 的展开/收起：初始设 line-clamp: 2 和 overflow: hidden，点击按钮后移除 line-clamp 并隐藏按钮；须用 scrollHeight 与 clientHeight 对比判断是否截断，且在渲染完成后测量，注意兼容性、富文本包裹及 SSR 安全处理。
用 line-clamp 截断多行但需要“展开更多”交互怎么办
纯 CSS 的 line-clamp 只能做静态截断，它本身不提供“展开/收起”逻辑，也不响应点击。想实现“展开更多”，必须配合 JavaScript 控制元素的 display 或 max-lines（后者需用 JS 动态改内联样式），同时切换按钮状态。
常见错误是只加了 line-clamp 就以为能自动展开——它只是视觉裁剪，DOM 内容始终完整，JS 仍可读取全文。
- 推荐做法：初始用
line-clamp: 2+overflow: hidden截断；点击按钮后移除line-clamp、清除max-height（如有）、并隐藏按钮本身 - 注意兼容性：
line-clamp在 Firefox 中需加-webkit-前缀，且仅对display: -webkit-box生效，不能用于flex或grid容器 - 如果内容含富文本（如
<span>、<strong>），line-clamp可能截断在标签中间导致渲染异常，建议包裹一层<div>并设display: -webkit-box
用 JS 判断是否发生截断再显示“展开更多”按钮
不是所有文本都超长，按钮应按需出现。不能靠字数或字符长度粗略判断——字体、字号、宽度、空格换行都会影响实际行数。
正确方式是测量 DOM 元素：先获取截断状态下的 scrollHeight，再对比其父容器（或自身）的 clientHeight。若前者明显大于后者，说明发生了截断。
立即学习“前端免费学习笔记（深入）”；
- 关键点：必须等文本渲染完成后再测，比如在
setTimeout(() => {}, 0)或requestAnimationFrame回调里执行 - 避免重复测量：用
ResizeObserver监听容器宽高变化，宽度变小时可能触发新截断，需重新判断 - 示例逻辑：
if (el.scrollHeight > el.clientHeight + 2) { showButton() }，+2 是为防像素级误差
展开后内容错位、换行异常或高度抖动
这是最常被忽略的渲染细节。用 line-clamp 截断时，浏览器内部做了特殊布局（-webkit-box），而展开后切回常规 block 流，可能导致行高、字间距、甚至基线对齐不一致。
- 统一行高：给文本容器设固定
line-height（如1.5），避免默认值随字体变化 - 禁用过渡干扰：如果用了
max-height+transition实现动画，容易因高度估算不准造成收起时卡顿或残留空白，建议改用height: auto配合getComputedStyle动态计算目标高度 - 慎用
word-break: break-all：它会强制断词，展开前后断点位置不同，用户感知上像“内容变了”
服务端渲染（SSR）或静态站点中如何安全启用
SSR 环境没有 window 和 document，直接运行测量逻辑会报错；同时，首次渲染需决定按钮是否显示，否则会出现“闪现”（先显示按钮又立刻隐藏）。
- 策略一：服务端默认不截断（即不加
line-clamp），客户端水合后 JS 再动态添加样式并判断是否需要按钮 - 策略二：用
useEffect（React）或onMounted（Vue）包裹测量逻辑，确保只在浏览器执行 - 关键细节：不要在 SSR 阶段依赖
innerHTML字符长度做预判——中英文混排、全角/半角、emoji 都会让字符数 ≠ 渲染行数
真正难的不是加个按钮，而是让“截断”和“展开”在各种字体、缩放、暗色模式、屏幕宽度下表现一致。多数 bug 出现在边界场景：超小屏、超大字体设置、动态加载内容后未重测、或者把 line-clamp 错用在 flex 子项上。
