本文介绍两种实现文字动态字间距以 100% 填充容器的方法：一种是基于 jquery 的精确计算方案（适配任意屏幕缩放），另一种是纯 css flexbox 方案（简洁高效、无 js 依赖）。
在响应式排版中，让一行文本（如标题或 Banner 文字）始终 精确撑满父容器宽度，同时保持字符均匀分布，是一个常见但易被低估的挑战。核心难点在于：字间距（letter-spacing）需随容器宽度实时变化，且必须考虑字体渲染差异、空格处理、换行抑制等细节。
✅ 推荐方案一：CSS Flexbox（零 JS，高性能）
最优雅的解法是放弃 letter-spacing，转而利用 Flexbox 的 justify-content: space-between 布局能力：
Lorem ipsum dolor sit amet
.stretch {display: flex; justify-content: space-between; width: 100%; margin: 0;} .stretch > span {display: inline-block; /* 确保每个字符独立参与 flex 分布 */}// 将每个字符包裹为 const el = document.querySelector('.stretch'); el.innerHTML = Array.from(el.textContent) .map(char => `${char === '' ?'u00A0': char}`) .join('');⚠️ 注意事项：空格需替换为不间断空格（u00A0），否则会被 Flex 忽略；若文本含 HTML 标签（如），需先提取纯文本再处理；在 resize 或内容变更后需重新执行包裹逻辑（可封装为函数）。
✅ 方案二：jQuery 动态计算（高精度控制，兼容旧项目）
您提供的脚本逻辑正确，但存在两个关键问题导致“未占满容器”：
- textElement.width() 返回的是内容宽度（不含 padding/border），而容器宽度是 .container.width()，二者基准不一致；
- 未强制禁用换行与文本溢出，导致 white-space: nowrap 失效于某些字体或 浏览器。
优化后的稳定版本如下：
$(document).ready(function () {const $text = $(".dynamic-text"); const $container = $(".container"); function adjustLetterSpacing() { const containerWidth = $container.outerWidth(); // 使用 outerWidth 包含 padding const textWidth = $text[0].getBoundingClientRect().width; // 更精准的渲染宽度 const textLength = $text.text().replace(/s/g, '').length; // 排除空格影响 if (textLength <= 1) {$text.css("letter-spacing","0px"); return; } // 总可用间距 = 容器宽 - 文本内容宽 const totalSpacing = Math.max(0, containerWidth - textWidth); // 每个间隙 = 总间距 ÷ (字符数 - 1) const letterSpacing = totalSpacing / (textLength - 1); $text.css("letter-spacing", Math.round(letterSpacing * 100) / 100 +"px"); } // 初始化 + resize 监听 adjustLetterSpacing(); $(window).on("resize", _.debounce(adjustLetterSpacing, 100)); // 使用 lodash 防抖，或自行实现 });.container {width: 100%; /* 改为响应式宽度 */ max-width: 1200px; margin: 0 auto;} .dynamic-text {white-space: nowrap; display: inline-block; /* 可选：防止字体抗锯齿干扰宽度测量 */ -webkit-font-smoothing: antialiased;}? 总结建议
- 优先选用 Flexbox 方案：语义清晰、性能卓越、无需监听 resize，适合现代项目；
- jQuery 方案适用于需精细控制（如动画过渡、多行支持）或需兼容 IE11 的场景；
- 无论哪种方式，务必在 font-family 和 font-size 稳定后再执行计算（避免 FOIT/FOUT 导致宽度误判）；
- 生产环境建议添加 resize 防抖，并在 visibility: hidden 切换时触发重算，确保布局一致性。
