实现响应式文字间距：让文本自动撑满容器宽度并动态调整字间距_技术教程

本文介绍两种实现文字动态字间距以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;
}