html文字溢出加省略号需满足容器固定宽高、视觉收敛需求及语义允许截断；单行需white-space:nowrap+overflow:hidden+text-overflow:ellipsis，多行依赖-webkit-line-clamp且兼容性有限，关键信息应避免截断或服务端处理。
HTML 文字溢出要不要加省略号，取决于容器是否固定宽高、是否需要视觉收敛，以及内容语义是否允许截断——不是“该不该”，而是“能不能、值不值、会不会坏”。
text-overflow: ellipsis 只对单行生效
这是最常踩的坑：text-overflow: ellipsis 本身不控制换行，它只在文本被 overflow: hidden 截断且处于单行时才显示省略号。
- 必须同时设置：
white-space: nowrap（禁换行）、overflow: hidden（隐藏溢出）、text-overflow: ellipsis - 如果容器高度允许多行（比如设置了
height: auto或没设高度），即使写了ellipsis，也完全不会出现省略号 - 多行省略需用其他方案（见下一条）
多行文字溢出加省略号只能靠 -webkit-line-clamp
-webkit-line-clamp 是目前唯一能在纯 CSS 中实现多行截断+省略号的方式，但它属于非标准属性，仅在 WebKit/Blink 内核（Chrome、Safari、Edge）中稳定支持，Firefox 不支持。
- 必需组合写法：
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: 2+overflow: hidden - 不能和
flex或grid布局混用——display: -webkit-box会覆盖掉它们 - 若需兼容 Firefox，得降级为 JS 方案（如截取字符数 +
textContent+offsetHeight对比）
省略号本身不是装饰，它改变可访问性与语义
加了 text-overflow: ellipsis 后，屏幕阅读器仍会读出完整文本（浏览器未截断 DOM 内容），但用户看到的只是部分。这会造成信息不对等。
- 如果字段是 ID、URL、错误码等不可省略的关键信息，强行加省略号等于藏掉关键数据
- 可用
title属性兜底：<div title="完整文本">截断文本…</div>，鼠标悬停可见，且部分读屏器会读title - 服务端截断更可控：提前按字节数或字符数处理，返回带省略号的字符串，避免前端样式失效导致全量暴露
Flex 容器里文字溢出容易被忽略的宽度来源
在 display: flex 的父容器中，子元素默认 flex-shrink: 1，会主动压缩自身宽度来适应空间——这会让 text-overflow 失效，因为文本根本没“溢出”。
- 解决方法：给文字容器加
flex-shrink: 0，或设min-width: 0（触发 flex item 的最小尺寸计算规则） - 常见场景：表格行内操作列、卡片标题+描述布局、导航菜单项
- 验证技巧：临时加
background: pink看文字容器实际占宽，再对比父容器剩余空间
真正难的不是怎么加省略号，而是判断哪一层该截、截到哪、截完还剩多少语义价值——样式只是表象，约束逻辑才是核心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
