实现响应式文字间距：让文本自动撑满容器宽度并动态调整字间距-js教程-PHP中文网

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

本文介绍两种实现文字动态字间距以100%填充容器的方法：一种是基于 jquery 的精确计算方案（适配任意屏幕缩放），另一种是纯 css flexbox 方案（简洁高效、无 js 依赖）。

在响应式排版中，让一行文本（如标题或 Banner 文字）始终精确撑满父容器宽度，同时保持字符均匀分布，是一个常见但易被低估的挑战。核心难点在于：字间距（letter-spacing）需随容器宽度实时变化，且必须考虑字体渲染差异、空格处理、换行抑制等细节。

✅ 推荐方案一：CSS Flexbox（零 JS，高性能）

最优雅的解法是放弃 letter-spacing，转而利用 Flexbox 的 justify-content: space-between 布局能力：

<p class="stretch">Lorem ipsum dolor sit amet</p>

.stretch {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0;
}
.stretch > span {
  display: inline-block; /* 确保每个字符独立参与 flex 分布 */
}

// 将每个字符包裹为 <span>
const el = document.querySelector('.stretch');
el.innerHTML = Array.from(el.textContent)
  .map(char => `<span>${char === ' ' ? '\u00A0' : char}</span>`)
  .join('');</span>

⚠️ 注意事项：空格需替换为不间断空格（\u00A0），否则会被 Flex 忽略；若文本含 HTML 标签（如），需先提取纯文本再处理；在 resize 或内容变更后需重新执行包裹逻辑（可封装为函数）。

✅ 方案二：jQuery 动态计算（高精度控制，兼容旧项目）

您提供的脚本逻辑正确，但存在两个关键问题导致“未占满容器”：

JSON Toolkit

JSON文件多功能工具。支持格式化、验证、压缩、键排序及点记法路径查询。零依赖。

下载

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 <pre class="brush:php;toolbar:false;">.container {
  width: 100%; /* 改为响应式宽度 */
  max-width: 1200px;
  margin: 0 auto;
}

.dynamic-text {
  white-space: nowrap;
  display: inline-block;
  /* 可选：防止字体抗锯齿干扰宽度测量 */
  -webkit-font-smoothing: antialiased;
}