使用jQuery Textfill限制Div内文本字号缩放的问题

要实现用户可手动调整字号，但文本最大只能填满容器不溢出的效果，你需要调整代码逻辑和容器样式，以下是具体方案：

核心问题分析 #

1. 逻辑冲突：你先手动设置用户选择的字号，再调用textfill，但textfill会强制将字号调整到固定的maxFontPixels（你设的40），完全覆盖用户选择，也没考虑容器实际边界。
2. 容器无固定尺寸：textfill需要明确的容器宽高来计算最大可行字号，否则无法正常工作。

解决方案步骤 #

1. 给容器设置固定尺寸 #

先给.message-header添加明确的宽高样式，让textfill能识别边界：

.message-header {
  width: 350px; /* 按需设置宽度 */
  height: 80px; /* 按需设置高度 */
  border: 1px solid #ddd; /* 可选，方便查看容器范围 */
  overflow: hidden;
  display: flex;
  align-items: center; /* 可选，让文本垂直居中 */
  padding: 0 10px; /* 可选，避免文本贴边 */
}
.message-header span {
  white-space: nowrap; /* 保持文本单行，需要换行可删除此属性 */
}

2. 调整JS逻辑 #

修改事件监听逻辑，以用户选择的字号为上限，让textfill自动计算最大不溢出的字号，同时实时响应滑块拖动：

$('.sign-header-font-size').on('input change', function() {
  // 获取用户选择的字号
  const userSize = parseInt($('#alg_wc_pif_local_2_bubble').text(), 10);
  const $textSpan = $('.message-header span');

  // 重置字号为最小值，确保textfill能正确计算
  $textSpan.css('font-size', '2px');

  // 调用textfill，以用户选择的字号为最大限制
  $textSpan.textfill({
    maxFontPixels: userSize,
    minFontPixels: 2, // 和滑块的min值对应
    success: function() {
      // 获取实际生效的字号，同步到气泡和滑块
      const actualSize = Math.round(parseFloat($textSpan.css('font-size')));
      $('#alg_wc_pif_local_2_bubble').text(actualSize);
      $('.sign-header-font-size').val(actualSize);
    }
  });
});

// 页面初始化时触发一次，确保文本初始状态正确
$(document).ready(function() {
  $('.sign-header-font-size').trigger('change');
});

3. 完整HTML示例 #

将样式和逻辑整合到HTML中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-textfill@0.6.0/source/jquery.textfill.min.js"></script>
<style>
.message-header {
  width: 350px;
  height: 80px;
  border: 1px solid #ddd;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.message-header span {
  white-space: nowrap;
}
</style>
<table>
<tr>
    <td>
        <label for="alg_wc_pif_local_2">Font Size</label>
    </td>
    <td>
        <input form="cart" min="2" max="100" step="1" class="sign-header-font-size" value="12" type="range" name="alg_wc_pif_local_2" data-min_qty="1" id="alg_wc_pif_local_2" placeholder="Font Size">
        <span class="alg_wc_pif_range_max">100</span>
        <span class="alg_wc_pif_range_bubble" style="float:right;" id="alg_wc_pif_local_2_bubble">12</span>
    </td>
</tr>
</table>

<div id="message-wrapper" class="message-wrapper">
  <div id="message-header" class="message-header">
    <span>YOUR TEXT</span>
  </div>

  <div id="message-footer" class="message-footer">
    <span>MORE TEXT</span>
  </div>
</div>

效果说明 #

• 当用户选择的字号小于等于容器可容纳的最大值时，文本使用用户选择的字号。
• 当用户选择的字号超出容器容纳上限时，textfill自动将字号调整到刚好填满容器的大小，同时同步更新滑块和气泡的显示值，避免感知不一致。

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