text-overflow: ellipsis在bootstrap中不起作用，是因为text-truncate仅封装overflow:hidden、text-overflow:ellipsis、white-space:nowrap，未提供块级显示和明确宽度，需手动补充d-block（或d-inline-block）及width/max-width等前提条件。
text-overflow: ellipsis 在 Bootstrap 中为什么不起作用？
直接加 text-truncate 类但文字没省略，大概率是因为缺了两个必要 CSS 前置条件：块级元素 + 宽度限制 + 强制单行。Bootstrap 的 text-truncate 只是封装了 text-overflow: ellipsis、white-space: nowrap 和 overflow: hidden，但它**不设置 width 或 max-width**，也不强制 display 为 block/inline-block —— 这些得你来补。
如何用 Bootstrap 工具类实现响应式省略（sm/md/lg/xl）
Bootstrap 本身没有 text-truncate-sm 这类断点专属类，必须手动组合工具类或写小段媒体查询。推荐用内联 style 或自定义 CSS，避免过度依赖 JS 或重复 class。
- 给容器加
text-truncate，再配合断点宽度控制：比如col-12 col-md-6 col-lg-4，让容器在不同屏幕下变窄，触发省略 - 若需严格按字符数截断（如“最多显示 20 字”），
text-truncate不适用 —— 它只按像素宽度裁剪，和字体、字号强相关 - 行内元素（如
<span></span>）用text-truncate前必须加d-inline-block或d-block，否则overflow: hidden无效
多行省略的替代方案（Bootstrap 5.3+）
Bootstrap 官方仍不支持 line-clamp 的响应式封装，但现代浏览器已原生支持。要实现「最多显示 2 行，超出省略」，得自己写：
.text-2lines {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 768px) {
.text-2lines {
-webkit-line-clamp: 1;
}
}
注意：-webkit-line-clamp 是非标准属性，Firefox 需额外加 display: block 和 height 模拟，且无法精确控制字符数。
容易被忽略的字体与渲染细节
同一段文字，在不同设备上是否省略，取决于实际渲染宽度 —— 而这受字体加载、font-weight、letter-spacing 影响极大。常见坑：
- 使用 Web Font 时，
text-truncate可能在字体加载前就计算宽度，导致误截或不截；加font-display: swap或用document.fonts.load()后再初始化容器宽度 - 中文混排英文/数字时，等宽字体（如
Consolas）会让省略位置突兀，建议统一用非等宽字体（如system-ui） - Bootstrap 的
text-truncate对<pre class="brush:php;toolbar:false;"></pre>或white-space: pre-wrap元素无效 —— 它依赖nowrap，二者冲突
响应式省略不是开个开关就能稳的，它卡在布局、字体、渲染三者的交界处。调的时候别只盯着 class，打开开发者工具量真实 width，再看 computed styles 里 text-overflow 是否生效。
