多行截断需与“展开更多”协同设计，因CSS原生text-overflow: ellipsis仅支持单行；多行须用-webkit-line-clamp或JS计算scrollHeight/clientHeight判断溢出，并注意布局抖动、字体加载及移动端缩放适配。
多行截断本身不影响“展开更多”功能，但两者必须协同设计，否则视觉和交互会出问题。
为什么 text-overflow: ellipsis 无法直接用于多行
CSS 原生的 text-overflow: ellipsis 只对单行生效，强行套在多行块上（比如设了 height 和 overflow: hidden）不会显示省略号，只会粗暴裁剪——文字被切掉一半，末尾没 …，用户根本不知道内容被截了。
常见错误现象：
– 文字突然消失在容器底部，无提示
– 点击“展开更多”后内容闪一下又回缩（因为截断逻辑和展开状态没解耦）
可行方案只有两类：
– JS 计算行高 + 截字符串 + 插入 …（兼容性好，但需监听字体加载、字号变更）
– CSS -webkit-line-clamp（仅 WebKit 内核支持，Firefox/IE 不认）
用 -webkit-line-clamp 实现多行截断时，“展开更多”按钮怎么绑定状态
关键不是“能不能截”，而是“截完后怎么告诉用户还能展开”。-webkit-line-clamp 是纯视觉截断，DOM 里文本还在，所以判断是否需要显示“展开更多”，不能看样式，得靠 JS 测量：
- 获取元素
scrollHeight与clientHeight，前者大于后者说明溢出 - 避免在
resize或字体加载完成前误判（document.fonts.load可监听） - 不要用
offsetHeight判断——它受 border/padding 影响，易误触发
示例逻辑：
if (el.scrollHeight > el.clientHeight) {<br> showExpandButton();<br>}
JS 截断方案中，换行符、空格、中英文混排怎么处理
直接按字符数截会把单词或标点劈开，体验极差。真实项目要兼顾可读性和性能：
- 优先按“可见行数”截：用
getClientRects()获取每行渲染后的矩形，取第 N 行末尾的文本位置 - fallback 到按字数截时，用正则找最近的空白符（
/[\s\u3000\uFEFF]+$/匹配空格、全角空格、零宽空格）回退 - 中英文混排时，
ch单位不可靠（中文占位宽于英文），别用width: 20ch控制截断长度 - 服务端预截断更稳：传参
maxLines=3，后端用类似line-break: strict的逻辑生成摘要
“展开更多”点击后，如何避免布局抖动和焦点丢失
直接移除 line-clamp 或 height 限制会导致重排，如果下方有其他元素，页面会跳。更麻烦的是，按钮本身可能被滚动带离视口，用户点完找不到反馈。
实操要点：
– 展开前先用 el.getBoundingClientRect() 记录按钮位置，展开后再 el.scrollIntoView({block: 'nearest'})
– 不要用 display: none 切换按钮，改用 visibility: hidden + height: 0 配合 transition（但注意：height: 0 对 flex 子项无效）
– 如果用 CSS 动画控制展开，确保 will-change: height 提前声明，防低端机卡顿
最容易被忽略的一点：移动端双击放大时，-webkit-line-clamp 可能失效，此时需监听 viewport 缩放事件并手动重算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
