CSS怎样实现响应式文字截断效果_配合text-overflow与伪元素
text-overflow: ellipsis 在 Flex 中失效需设 min-width: 0 并满足 overflow: hidden、white-space: nowrap；多行截断用 -webkit-line-clamp 但兼容性差；伪元素无法替代省略号，JS 截断更可靠。
Flex 容器导致 text-overflow: ellipsis 失效时的处理方法
直接原因：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 全版本均不支持，而某些 flex 场景的错位直到 Safari 17+ 才得到修复。
若想让它稳定运行，三件套必须配齐：
-
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() 进行精确判断。
