text-overflow: ellipsis 必须配合 white-space: nowrap、overflow: hidden 及明确宽度（如 width/max-width 或 flex-shrink+min-width: 0）才生效；Bootstrap 的 .text-truncate 封装前三者但依赖父容器约束。
text-overflow: ellipsis 必须配合哪些CSS属性才生效
单独写 text-overflow: ellipsis 没用，它只是“截断开关”，背后依赖一整套布局约束。常见现象是文字照常换行或撑开容器，一点省略号都不显示。
- 必须设置
white-space: nowrap（强制单行） - 必须设置
overflow: hidden（隐藏溢出内容） - 必须有明确宽度限制：用
width、max-width，或父容器为 flex/grid 且设了flex-shrink: 1等收缩规则
Bootstrap 的 .text-truncate 类其实就封装了这三者：overflow: hidden + text-overflow: ellipsis + white-space: nowrap，但依然要求你手动给元素加宽度控制。
在Bootstrap中直接用 .text-truncate 为什么有时不工作
不是类没加载，而是它对父容器结构很敏感。尤其在响应式布局里，容易被 flex 或 grid 的默认行为干扰。
- 如果父容器是
display: flex，子元素默认flex-shrink: 1，但若没设min-width: 0，文本会拒绝压缩，.text-truncate失效 - 在
table单元格里直接用，需额外加table-layout: fixed和列宽约束，否则宽度由内容撑开 - Bootstrap 5+ 中，
.text-truncate不支持多行截断（那是line-clamp的事），别指望它处理两行以上
示例修复：
<div class="d-flex"><br> <div class="flex-shrink-1 text-truncate" style="min-width: 0; width: 200px;">超长用户名显示不全怎么办</div><br></div>
立即学习“前端免费学习笔记（深入）”；
多行文字截断的替代方案：-webkit-line-clamp vs clamp()
Bootstrap 没提供原生多行截断类，text-overflow: ellipsis 只管单行。想截两行？得自己来。
-
-webkit-line-clamp是最常用方案，但属于非标准 CSS，仅 Chrome/Safari/Edge 支持，Firefox 不认 - CSS
clamp()函数不能替代截断，它是计算值，和溢出无关 - 真正跨浏览器的多行截断目前仍需 JS 辅助（如
react-lines-ellipsis）或服务端截断后加…
纯 CSS 多行示例（注意兼容性）：
.multi-line-truncate {<br> display: -webkit-box;<br> -webkit-line-clamp: 2;<br> -webkit-box-orient: vertical;<br> overflow: hidden;<br>}
响应式场景下 text-overflow 容易被忽略的宽度陷阱
很多人在媒体查询里改 font-size 或 padding，却忘了同步调宽——结果小屏下文字更短，反而提前截断；大屏下字变小，本该显示更多却还是被砍掉。
- 避免用固定
width: 200px，优先用max-width: 80%或ch单位（如max-width: 30ch） - 在 Bootstrap 的栅格系统中，
.col-6 .text-truncate在小屏可能变成满屏宽度，此时需配合min-width: 0防止 flex 项撑开 - 字体加载完成前，浏览器按 fallback 字体估算宽度，可能导致初始截断位置错乱，可加
font-display: optional或 JS 监听fontload后重设
复杂点在于：截断效果不是独立样式问题，而是宽度、白空间、溢出、渲染时机四者咬合的结果。少一个齿轮，整个机制就卡住。
