text-overflow: ellipsis生效需同时满足：white-space: nowrap（单行）或white-space: normal+display: block+固定宽高（多行）、overflow: hidden、明确width/max-width。
text-overflow: ellipsis 必须配合哪些CSS属性才生效
单独写 text-overflow: ellipsis 没用，浏览器直接忽略。它是个“依赖型”属性，缺一不可。
- 必须设
white-space: nowrap（单行截断）或white-space: normal+display: block+ 固定宽高（多行需额外处理） - 必须设
overflow: hidden，否则文字会撑开容器、不触发截断 - 必须设明确宽度（
width或max-width），百分比、fit-content等弹性值在某些场景下不可靠
常见错误现象：text-overflow 写了但没效果，八成是漏了其中一项，尤其容易忘 overflow: hidden —— 它不是“可选装饰”，而是截断机制的开关。
Bootstrap 5 中 text-truncate 类的等效手写代码
Bootstrap 的 text-truncate 是个轻量工具类，本质就是三条声明的组合，没有魔法。
等效手写是：
立即学习“前端免费学习笔记（深入）”；
.my-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
注意：它只作用于**块级元素**（如 <div>、<code><p></p>），对 <span></span> 默认无效，除非手动加 display: inline-block 或 display: block。
- 如果元素是
flex子项，还需确认父容器没设flex-shrink: 0，否则子项不压缩，截断不触发 - Bootstrap 5 不提供原生多行截断类（如 -webkit-line-clamp），
text-truncate严格单行
多行文字溢出截断的兼容性取舍
想截两行或三行并显示省略号？CSS 原生方案只有 -webkit-line-clamp，但它不是标准属性，Firefox 全版本不支持，Safari 17+ 才开始有限支持。
- 纯 CSS 方案：用
display: -webkit-box+-webkit-line-clamp，仅限 WebKit 内核，上线前务必测 Safari 和 Chrome 版本 - 更稳方案：服务端截断（如限制字符数）+ 前端加省略号，或 JS 方案（如
clamp.js），但增加运行时开销 - 别用
height+overflow: hidden粗暴截断——中英文混排、字号变化时，行高计算不准，极易切掉半行字
性能影响小，但兼容性坑大；选哪条路，取决于你是否能接受 Firefox 用户看到完整未截断文本。
为什么设置 text-overflow 后文字突然换行或错位
典型症状：加了截断样式，文字从一行变成两行，或和旁边图标错位。根本原因常是 white-space 或 display 冲突。
- 检查是否误用了
white-space: normal（默认值），它允许换行，text-overflow失效；单行截断必须nowrap - 如果父容器是 Flex 布局，子元素没设
flex-shrink: 1，可能因空间不足被强制换行，而非截断 - 字体加载未完成时，
font-display: swap可能导致初始渲染用备用字体，宽度突变，触发重排——建议用font-display: optional或预设最小宽度
最容易被忽略的是 flex 场景下的收缩行为，很多人只盯 text-overflow 本身，却忘了容器布局才是第一道关卡。
