text-overflow: ellipsis 在 Flex 中失效需设 min-width: 0 并满足 overflow: hidden、white-space: nowrap；多行截断用 -webkit-line-clamp 但兼容性差；伪元素无法替代省略号，JS 截断更可靠。
text-overflow: ellipsis 在 Flex 容器里失效怎么办
直接原因：text-overflow 要生效，元素必须满足三个条件——块级（或 inline-block）、overflow: hidden、white-space: nowrap。而 Flex 子项默认是 min-width: auto，会撑开容器，导致 overflow 压根没触发。
实操建议：
- 给文字容器加
min-width: 0（Flex 项中重置最小宽度） - 确保父容器设了明确宽度（或
max-width），且自身是display: flex - 文字容器需同时设置：
overflow: hidden、white-space: nowrap、text-overflow: ellipsis
示例关键 CSS：
.container {
display: flex;
}
.name {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
用 ::after 伪元素替换省略号的限制与写法
浏览器原生 text-overflow: ellipsis 不支持自定义省略符号，但很多人误以为加 ::after 就能覆盖——其实不行。伪元素插在内容末尾，但截断发生在渲染层，::after 会被一起裁掉。
立即学习“前端免费学习笔记（深入）”；
真正可行的替代方案是「JavaScript + textContent 截断」，再手动拼接符号；或者用 display: -webkit-box 多行方案（见下一条）。
注意点：
-
::before/::after对单行text-overflow无效，别白费劲 - 若坚持用伪元素，必须放弃原生截断，改用 JS 控制字符串长度 +
innerHTML注入 - 多行截断时，
-webkit-line-clamp才配合伪元素有操作空间
多行文字截断用 -webkit-line-clamp 的兼容性坑
-webkit-line-clamp 是目前最简的多行省略方案，但它本质是 WebKit 私有属性，Firefox 全版本不支持，Safari 17+ 才修复了某些 flex 场景下的错位问题。
要让它稳定工作，必须配齐三件套：
-
display: -webkit-box（不能用flex或block） -webkit-box-orient: vertical-
-webkit-line-clamp: N（N 为行数）
常见翻车场景：
- 父容器用了
display: grid，子项加-webkit-box会失效 - 文字含
<span>等内联元素，可能破坏盒模型，建议只对纯文本节点使用 - 设置了
line-height但没同步调height，导致最后一行被切掉半截
响应式文字截断如何随屏幕宽度动态改行数或字数
纯 CSS 没法根据 em 或视口变化“自动算该截几字”，所以得靠媒体查询 + 多套 -webkit-line-clamp 值，或 JS 监听 resize 动态计算。
更实用的做法是分层控制：
- 小屏（
max-width: 480px）：单行text-overflow: ellipsis - 中屏（
481px–768px）：两行-webkit-line-clamp: 2 - 大屏（
min-width: 769px）：三行或取消截断
注意：不要用 vw 单位直接设 width 再套 ellipsis，字体渲染存在亚像素差异，临界宽度下容易闪动或漏出半个字。
真正难处理的是中英文混排 + 变宽字体（如等宽代码段落），这时候 CSS 截断基本不可靠，得切到 canvas 测量或用 ResizeObserver 配合 getBoundingClientRect() 做精确判断。
