Bootstrap实现文字在Modal内根据内容长短自动缩放字号

CSS clamp() 是最轻量的Modal文字自动缩放解法，通过 font-size: clamp(0.75rem, 2.5vw, 1.5rem) 实现字号在最小值与最大值间随容器宽度平滑变化，需作用于文本容器而非模态框根元素。

Modal里文字自动缩放：CSS clamp() 是最轻量解法

直接用 clamp() 函数控制字号范围，不依赖 JavaScript，兼容现代浏览器（Chrome 76+、Firefox 75+、Safari 13.1+）。关键不是“撑满容器”，而是让字号在最小值和最大值之间随容器宽度平滑变化。

• font-size: clamp(0.75rem, 2.5vw, 1.5rem); 表示：最小 0.75rem，最大 1.5rem，中间按视口宽 2.5% 线性插值
• 把 clamp() 写在 Modal body 内的文本容器上（比如 <p> 或 <div class="modal-text">），别写在 .modal 根元素上——否则受整个模态框宽高影响，缩放逻辑会失真
• 如果 Modal 宽度固定（如 modal-lg），改用容器相对单位更稳：font-size: clamp(0.875rem, 4vw, 1.25rem);，其中 4vw 是基于视口，但实际效果取决于 Modal 实际渲染宽度；若需严格基于 Modal body 宽度，得配合 container + max-width 控制

长文本溢出时强制单行 + 缩放失效？加 overflow 和 text-overflow

当文字过长、又设了 white-space: nowrap 或容器宽度受限时，clamp() 仍生效，但视觉上会被截断——这不是缩放失败，是布局没预留空间。

• 确保父容器没设死 width 或 max-width 限制文本自然换行；若必须单行，补上：overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
• 注意 text-overflow: ellipsis 要求元素是块级且有明确宽度，Bootstrap 的 .modal-body 默认是 block，但若嵌套在 flex 容器里，可能需要加 min-width: 0 防止 flex 伸缩干扰截断
• 如果用了 display: flex 布局包裹文字，clamp() 字号依然起作用，但需确认 flex item 没被 flex-shrink: 0 锁死宽度，否则缩放后文字仍溢出

需要支持旧版浏览器（IE / 早期 Edge）？JavaScript fallback 得精简

IE 完全不支持 clamp()，旧 Edge（≤18）也不支持。若必须兼容，用极简脚本监听字体尺寸并动态调整，避免重排开销。

• 只监听 resize 事件（不用 input 或 scroll），且加防抖：setTimeout 延迟 100ms 执行计算
• 计算逻辑只读取 offsetWidth，不触发 layout：例如 const width = el.parentElement.offsetWidth; fontSize = Math.min(maxSize, Math.max(minSize, width * 0.03));
• 别用 getComputedStyle(el).fontSize 反查当前值——IE 返回带单位字符串，解析易错；直接维护一个内部 currentSize 变量更可靠
• Bootstrap 5 的 Modal 是通过 data-bs-toggle="modal" 触发，脚本应在 shown.bs.modal 事件后首次计算，而非 DOM ready 就跑——因为 Modal 初始是 display: none，此时 offsetWidth 为 0

字体缩放后行高/字间距失衡？用 relative 单位统一调控

字号变小或变大时，line-height 和 letter-spacing 若用固定值（如 px），视觉节奏会断裂。

• 全部改用无单位数值或 em：line-height: 1.4;（相对于当前 font-size）、letter-spacing: 0.02em;
• 避免 line-height: 24px 这类绝对值，否则字号缩到 12px 时行高还是 24px，显得空洞；同理，margin-bottom: 1rem 比 margin-bottom: 16px 更适配缩放
• 如果 Modal 内混用标题和正文，标题用 clamp(1.25rem, 3vw, 2rem)，正文用 clamp(0.875rem, 2vw, 1.125rem)，两者比例保持一致，视觉层级才稳定

Bootstrap Modal 本身不提供字号自适应 API，所有缩放行为都得靠 CSS 或手动 JS 控制。真正容易被忽略的是：Modal 的 fade 动画期间，DOM 尺寸可能未完全就绪，offsetWidth 读取偏小；若用 JS fallback，务必等 transitionend 或 setTimeout 延迟再计算。