modal中text-truncate失效的根本原因是modal-body为flex容器，其子项默认min-width:auto不收缩，且text-truncate需作用于块级元素并配合max-width、overflow:hidden、white-space:nowrap才能生效。
Modal里text-truncate为啥加了没反应
不是类写错了，是Modal内部结构默认不满足截断条件。Modal-body默认是flex容器，里面直接放的
或会因flex子项不收缩、父容器无明确宽度而让text-truncate完全失效。
-
text-truncate需要overflow: hidden生效，但Modal-body的flex布局会让子元素撑开宽度，overflow根本没边界可裁 - 直接套在
<span></span>上无效——span是inline元素，text-overflow不作用于inline上下文 - Modal-body没设
max-width或width，即使写了text-truncate，浏览器也不知道“溢出”从哪算起
Modal-body内单行省略的可靠写法
必须同时控制容器宽度、子元素显示模式和flex收缩行为。最简路径是：给文字容器加min-w-0 + text-truncate + 显式宽度约束。
- 用
<div class="min-w-0 text-truncate" style="max-width: 100%">文字</div>——min-w-0释放flex子项收缩能力，max-width: 100%确保不超出Modal-body可视区 - 如果Modal-body用了
px-4 py-3等内边距，max-width: calc(100% - 2rem)比max-width: 100%更准（避免padding干扰计算） - 别用
w-100代替max-w-100——w-100强制100%宽，可能在窄屏下把文字压成单字一列，max-w-100才真正响应内容宽度
Modal中多行省略（如标题+描述两行）怎么配
text-truncate对多行无效，得手动加-webkit-line-clamp，但在Modal里要额外防height错位和flex干扰。
- 必须写全四条：
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: 2+overflow: hidden - Modal-body是flex容器？给目标元素加
min-w-0，否则-webkit-box会被flex引擎忽略高度约束 - 别设
height，用max-height: 3.5rem（假设line-height: 1.5），否则第二行底部可能被硬切掉 - Firefox用户看不到省略号——这是CSS原生限制，没fallback方案，只能接受或上JS截断
Modal全屏时省略号突然消失的排查点
Modal切换到modal-fullscreen-md-down类后，常见失效是因为宽度逻辑被重置，不是样式丢失。
- 检查computed样式里的
width是否变成auto——全屏Modal-body可能继承width: 100vw，但text-truncate需要的是内容容器的max-width，不是视口宽 -
col-lg-auto这类类在全屏下会让容器自适应内容，导致截断条件消失；换成col-lg-8或max-w-3xl显式控宽 - 字体加载延迟影响宽度计算：Web Font未就绪时，浏览器按默认字体宽度截断，字体重载后撑开——加
font-display: swap或用document.fonts.load()后重设容器宽度
实际调试时，右键检查元素，盯着Computed面板看width、overflow、white-space三项是否全为预期值。少一个，省略号就静默失效——这跟Modal本身关系不大，本质还是CSS截断的硬性条件没凑齐。
