text-overflow: ellipsis需与white-space: nowrap、overflow: hidden配合才生效；多行省略依赖-webkit-line-clamp；js方案需测真实宽度防截半字；字体差异影响省略效果。
text-overflow: ellipsis 只对单行生效
直接写 text-overflow: ellipsis 没用，它必须和 white-space: nowrap、overflow: hidden 配合才起作用，三者缺一不可。常见错误是只加了 text-overflow，结果文字照常换行或溢出容器。
适用场景：导航栏菜单项、表格固定列宽的文本、卡片标题等需要严格控高且内容不确定长度的地方。
实操建议：
- 确保父容器有明确宽度（比如
width: 200px或max-width: 100%），否则overflow: hidden不会触发截断 -
white-space: nowrap会强制整段文字不换行，如果原本期望允许换行但末尾省略，这个方案就不适用 - 不要在
flex容器子项上单独设white-space: nowrap却忘了给父项设min-width: 0，否则 flex 项可能撑开容器导致省略失效
多行省略要用 -webkit-line-clamp（非标准但实用）
纯 CSS 实现多行省略目前只有 -webkit-line-clamp 这一条路，它不是 W3C 标准，但在 Chrome、Edge、Safari 和新版 Firefox 中都支持。别信“用 display: -webkit-box 就能兼容所有浏览器”——Firefox 旧版本和 IE 完全不认。
立即学习“前端免费学习笔记（深入）”；
典型错误现象：line-clamp 设了 3 却只显示 1 行，或者末尾没出现省略号，大概率是漏了 overflow: hidden 或 display: -webkit-box。
实操建议：
- 必须按顺序写这四条：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2、overflow: hidden -
-webkit-line-clamp的值是行数，不是高度，所以字体大小变化时，实际截断位置会浮动 - 不能和
text-align: justify同时用，后者会让省略号错位甚至消失
JavaScript 方案适合动态控制或降级兜底
当 CSS 省略不可靠（比如要兼容 IE11、或内容含复杂 inline 元素）、或需要点击展开/收起时，就得用 JS 截断字符串再拼 "…"。但别直接用 str.substring(0, n) + "…" —— 中文、emoji、全角符号长度和渲染宽度不一致，容易截半字或撑破容器。
使用场景：评论列表摘要、后台管理系统的日志预览、需要统计“已省略 X 字”的场合。
实操建议：
- 优先用
canvas.measureText()或getBoundingClientRect()测量真实宽度，而不是按字符数硬切 - 若用字符数估算，中文统一按 2 字节、英文数字按 1 字节算，再结合
font-size和容器宽度反推最大字符数 - 注意处理空格和换行符：
" hello\nworld "截断前最好.trim()，否则首尾空格占位却不可见，造成省略位置偏差
font-family 和 font-size 会影响省略位置
同一段文字，在 "PingFang SC" 和 "Courier New" 下，即使字号相同，显示宽度也差 15% 以上。这意味着你调试时看着刚好，上线后换字体就溢出或留白过多。
性能影响常被忽略：用 -webkit-line-clamp 的元素如果频繁重排（比如父容器尺寸动画），会触发多次 layout；JS 截断若在滚动中反复调用 getBoundingClientRect()，容易卡顿。
实操建议：
- 在 CSS 中显式声明
font-family和font-size，避免依赖用户系统默认字体 - 对高频更新区域（如实时聊天消息流），用
IntersectionObserver延迟到进入视口后再计算省略，而非scroll事件里立刻执行 - 服务端提前截断（比如 API 返回
title_short字段）比前端 JS 或 CSS 更稳定，尤其对 SEO 和首屏速度敏感的页面
