实现文字溢出显示省略号需组合white-space: nowrap、overflow: hidden和text-overflow: ellipsis，并设置明确宽度；多行省略可用-webkit-line-clamp；注意flex布局中min-width: 0及可访问性问题。
页面排版中处理长文本溢出，核心是让内容在可控范围内显示省略号，既不破坏布局，又保留信息提示。关键不在“加一个属性”，而在于三个CSS规则协同生效，且容器具备可计算边界。
单行文本截断：必须配齐“三件套”
只写 text-overflow: ellipsis 没用，它依赖以下条件同时成立：
-
width 或 max-width：容器要有明确宽度（如
width: 240px或max-width: 100%），否则浏览器无法判断“从哪开始溢出” - white-space: nowrap：强制文本不换行，否则会自然折行，省略号没机会出现
- overflow: hidden：隐藏超出部分，省略号才能被“挤”出来
常见陷阱：给 <span> 或 <a> 这类内联元素直接加这三条，但没改 display。内联元素不响应 width 和 overflow，需加上 display: inline-block 或 display: block。
多行文本截断：优先用 -webkit-line-clamp（移动端友好）
适用于 Chrome、Safari、Edge 等现代浏览器，语法简洁：
-
display: -webkit-box：启用弹性盒模型 -
-webkit-box-orient: vertical：设置子元素垂直排列 -
-webkit-line-clamp: 2：限制最多显示 2 行（可调） -
overflow: hidden：配合截断，不可省略
注意：-webkit-line-clamp 是非标准属性，Firefox 全版本不支持。若需全浏览器兼容，得用 JavaScript 动态测量行高+逐字截断，或借助 line-clamp 的 polyfill 库。
响应式场景下的动态截断
固定宽度（如 width: 200px）在小屏上可能太宽，在大屏上又太窄。更稳妥的做法是：
- 用
max-width: 100%配合min-width: 0（尤其在 Flex/Grid 容器里，防止单元格撑开） - 结合媒体查询按断点调整
max-width，例如手机端设为max-width: 140px，桌面端设为max-width: 260px - 表格中避免用
white-space: nowrap，改用table-layout: fixed+word-break: break-word配合省略号，防止列宽失控
Canvas 中的文本溢出要手动实现
Canvas 没有原生省略号支持，必须自己算：
- 用
ctx.measureText(text)获取文本像素宽度 - 从完整文本开始，逐个字符截取，直到宽度 ≤ 容器宽度 − 省略号宽度（约 12–16px）
- 最后拼接
截取文本 + "…"渲染 - 中英文混排时注意字体差异，建议统一用等宽字体或预设字符宽度表提升精度
