如何实现文本初始占容器100%宽度，随屏幕缩小动态调整letter spacing？

需要实现的效果：

• 一行文本初始时占容器100%宽度
• 屏幕尺寸缩小时，字间距（letter spacing）相应减小
• 字间距基于容器宽度调整，窗口resize时重新计算

当前问题：能实现字间距变化，但无法让文本占满容器宽度，现有代码如下：

$(document).ready(function () {

    function adjustLetterSpacing() {
        var containerWidth = $('.container').width();
        var textElement = $('.dynamic-text');
        var maxWidth = containerWidth - 50;
        var textWidth = textElement.width();
        var letterSpacingValue = 0;

        if (maxWidth > textWidth) {
            var textLength = textElement.text().length;
            letterSpacingValue = (maxWidth - textWidth) / (textLength - 1);
        }

        $('.dynamic-text').css('letter-spacing', Math.max(0, letterSpacingValue) + 'px');
    }

    // Initial adjustment on page load
    adjustLetterSpacing();

    $(window).on('resize', adjustLetterSpacing);

});

.container {
  width: 1200px;
  }

.dynamic-text {
    white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="container">
  <p>
      <span class="dynamic-text">
          Lorem ipsum dolor sit amet
      </span>
  </p>
</div>

你的代码里有两个核心问题导致文本无法占满容器：

1. 主动设置了maxWidth = containerWidth - 50，相当于给文本留了50px空白，直接去掉这个偏移就能让文本向容器全宽靠拢
2. 没有处理元素默认边距和字间距缓存的问题，导致宽度测量不准确

修改后的代码如下：

修改后的JavaScript #

$(document).ready(function () {
    function adjustLetterSpacing() {
        var containerWidth = $('.container').width();
        var textElement = $('.dynamic-text');
        
        // 先重置字间距为0，确保测量的是文本本身的真实宽度
        textElement.css('letter-spacing', '0px');
        var textWidth = textElement.width();
        var letterSpacingValue = 0;
        var textLength = textElement.text().trim().length;

        // 文本长度大于1时才计算，避免除以0的错误
        if (textLength > 1 && containerWidth > textWidth) {
            // 把容器剩余宽度平摊到每个字符间隙
            letterSpacingValue = (containerWidth - textWidth) / (textLength - 1);
        }

        textElement.css('letter-spacing', Math.max(0, letterSpacingValue) + 'px');
    }

    // 初始加载调整
    adjustLetterSpacing();

    // 给resize加防抖，减少频繁计算
    $(window).on('resize', function() {
        clearTimeout(window.resizeTimer);
        window.resizeTimer = setTimeout(adjustLetterSpacing, 25);
    });
});

修改后的CSS #

.container {
  width: 1200px;
  max-width: 100%; /* 让容器自适应屏幕宽度 */
  padding: 0;
  margin: 0;
}

.dynamic-text {
    white-space: nowrap;
    display: inline-block; /* 确保宽度测量准确 */
    padding: 0;
    margin: 0;
}

p {
    margin: 0; /* 去掉p标签默认外边距，避免影响宽度计算 */
}

修改后的HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="container">
  <p>
      <span class="dynamic-text">
          Lorem ipsum dolor sit amet
      </span>
  </p>
</div>

关键修改说明 #

• 移除了containerWidth - 50的偏移，直接用容器全宽计算
• 每次计算前重置字间距为0，避免之前的字间距干扰真实宽度测量
• 增加文本长度判断，防止单字符时出现除以0的错误
• 给resize事件加防抖，减少频繁触发的性能损耗
• 清理了元素默认边距，确保宽度测量精准
• 给.dynamic-text加display: inline-block，保证宽度计算准确

内容的提问来源于stack exchange，提问作者Junky