text-overflow: ellipsis 在 bootstrap 4 卡片标题中不生效，是因为需同时满足三个条件：块级元素、固定宽度（或父容器有明确宽度）、white-space: nowrap；而 .card-title 默认无宽度约束且文本可换行。
为什么 text-overflow: ellipsis 在 Bootstrap 4 卡片标题里不生效？
直接给 .card-title 加 text-overflow: ellipsis 几乎肯定失败——它需要三个条件同时满足：块级元素、固定宽度（或父容器有明确宽度）、white-space: nowrap。而 Bootstrap 4 的 .card-title 默认是 display: block，但卡片容器（.card 或 .card-body）往往没有设定 width 或 max-width，且文本默认可换行。
必须设置的三个 CSS 规则
缺一不可，顺序无关，但建议写在一起便于维护：
-
overflow: hidden—— 省略号的前提，否则溢出内容会撑开容器 -
text-overflow: ellipsis—— 触发省略号渲染 -
white-space: nowrap—— 强制单行，否则ellipsis不起作用
另外，确保该元素有明确的宽度约束。常见做法是给父容器加 max-width，或让标题自身设 width / max-width。例如：
.card-title.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
注意：max-width: 100% 是安全选择，它依赖父容器实际可用宽度，比写死像素值更健壮。
在 Bootstrap 4 卡片结构中该加在哪一层？
不要直接改 .card-title 全局样式，避免影响其他场景。推荐两种稳妥方式：
- 给标题加自定义类，如
<h5 class="card-title ellipsis">...</h5>，然后按上一条规则写 CSS - 如果标题嵌套在
.card-header或.card-body内，且父容器已设display: flex，可考虑对标题设flex-shrink: 1+ 上述三属性，防止被 flex 布局拉伸
特别注意：Bootstrap 4 的 .card-title 默认 margin-bottom 为 0.5rem，加了 nowrap 后若高度异常，检查是否因行高或 padding 导致视觉错位——这不是省略号问题，而是布局压缩后的副作用。
移动端适配和字体差异带来的坑
同一段文字，在不同设备或字体下截断位置可能不同。这是因为 text-overflow 按像素截断，而非字符数。常见表现：
- iPhone Safari 下偶尔多显示一个字，Android Chrome 下少一个字
- 使用
font-family: "Noto Sans SC", sans-serif时比默认Helvetica更容易提前截断
缓解方法只有两个：
- 在关键卡片上用
min-width配合媒体查询，例如@media (max-width: 576px) { .ellipsis { max-width: 80%; } } - 避免在超短标题（如 ≤ 3 个汉字）上强行加省略号，CSS 会静默失效，不如用 JS 控制字符长度
真正难处理的是中英文混排+标点+全角半角混合的标题——这时候 CSS 省略号行为不可控，得接受它“尽力而为”的事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
