<p>必须用 CSS clamp() 配合正确作用域和布局约束才能实现文字自动适配容器大小，Bootstrap 的 fs-* 类因作用域限制和继承截断在 Modal 中常失效，且默认基于视口而非容器宽度。</p>
不能靠 Bootstrap 自带类实现文字自动适配容器大小，必须用 CSS clamp() 配合正确作用域和布局约束——否则无论加多少 text-center 或 fs-* 都没用。
为什么 fs-* 类在 Modal 里经常不生效
Bootstrap 5.3+ 的 fs-* 类底层确实是 clamp()，但它们只作用于直接子元素，且会被 .modal-content 的 font-size: 1rem 截断继承链。常见现象是 DevTools 显示 computed font-size 是 16px，实际却没随窗口缩放。
- 检查是否用了 Bootstrap 5.3 或更高版本（
npm list bootstrap或 CDN URL 含@5.3） - 确认没在
:root或html上改过font-size，否则clamp(1rem, 2.5vw, 1.5rem)的 rem 基准就偏了 - 别把
fs-4加在.modal根上——要加在.modal-body p或.modal-title这类具体文本容器上 - 如果用了
data-bs-backdrop="static"，检查body是否被加了modal-open后强制overflow: hidden，影响布局流
怎么让 clamp() 真正绑定容器宽度而非视口
clamp() 默认基于视口宽度（vw），但 Modal 实际渲染宽度常小于视口，直接套用会导致缩放“过猛”。若需更贴近容器表现，得结合 max-width 控制和单位微调。
- 对固定宽度 Modal（如
.modal-lg），改用更小的 vw 系数：font-size: clamp(0.875rem, 1.8vw, 1.25rem) - 若 Modal body 有明确
max-width（比如max-width: 600px），可配合container类 +mx-auto，再用text-center让文字随容器居中——此时缩放效果才稳定 - 避免在
.modal-dialog上设max-width却不配width: 100%，否则内容区实际宽度会小于预期，text-center看起来像“偏左” - 真要严格按容器宽度缩放，得用 JS 测量父容器并动态写
style，但代价是失去 CSS 性能优势，不推荐
Flex 容器里文字居中失效的根本原因
text-center 在 .modal-header 或 .modal-footer 里无效，不是 class 没加对，而是这些区域默认是 display: flex，text-align 对 flex 子项完全不起作用。
- 标题居中：给
.modal-header加justify-content-center（Bootstrap 5.3+ 支持），或移除d-flex类后再加text-center - 标题左对齐 + 关闭按钮右对齐：保留
justify-content-between，再给.modal-title加flex-grow-1 text-start -
.modal-body里加text-center没反应？先检查它是否被包在d-flex、form或其他 flex 容器里——这些会覆盖text-align行为 - 含图标+文字的按钮，别用
inline-block，统一用display: flex; align-items: center，否则缩放后基线偏移
缩放后文字错位、换行异常的隐藏条件
字号变了，但 line-height 和 white-space 还卡在旧值，就会出现小屏挤成一团、大屏横向溢出的问题。
- 行高必须用无单位值：
line-height: 1.4（不是1.4rem或20px） - 禁用
white-space: nowrap，尤其在按钮、标签或图标文字组合里；如需单行，补上overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - 确保页面有
<meta name="viewport" content="width=device-width, initial-scale=1">，否则vw单位会失效 - 最隐蔽的坑：Modal DOM 如果不在
<body>直系下（比如被 Vue/React 挂到某个position: relative的 wrapper 里），所有基于视口的计算都会失准——缩放和对齐同时失效，且很难定位根源
