本文介绍两种实现文字动态字间距以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 切换时触发重算，确保布局一致性。
