如何在jQuery Resizable调整div大小时缩小字体并保持单行显示

我来帮你搞定这个问题！你想要的是拖动调整<div>大小时，字体自动跟着缩放，同时文本始终保持在同一行，对吧？之前用vh单位只能响应浏览器窗口变化，咱们换个思路，通过监听jQuery UI的resize事件来动态计算字体大小就能实现啦。

核心思路 #

原来的vh单位是基于浏览器视口高度的，所以只有窗口改变时字体才会变。咱们需要：

• 监听<div>的resize事件，每次调整容器尺寸时触发计算
• 计算容器宽度和文本内容的宽度比例，动态调整字体大小
• 保留white-space: nowrap保证文本始终单行显示

修改后的完整代码 #

HTML部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize">Some name that is very long</div>

CSS部分

.resize{
  font-size: 20px; /* 初始字体大小，后续由JS动态调整 */
  white-space: nowrap;
  color: black;
  background: yellow;
  cursor: move;
  width: 130px;
  height: 130px;
  overflow: hidden; /* 可选，防止文本溢出容器边界 */
}

JavaScript部分

// 初始化可调整大小组件，并添加resize事件监听
$('.resize').resizable({
  minWidth: 110,
  minHeight: 120,
  resize: function(event, ui) {
    const $container = $(this);
    const containerWidth = ui.size.width;
    const textContent = $container.text();

    // 创建临时元素计算文本在当前字体下的真实宽度
    const $tempSpan = $('<span>')
      .text(textContent)
      .css({
        whiteSpace: 'nowrap',
        fontSize: $container.css('fontSize'),
        position: 'absolute',
        visibility: 'hidden' // 隐藏临时元素，不影响页面
      })
      .appendTo('body');
    
    let textWidth = $tempSpan.width();
    $tempSpan.remove(); // 计算完成后移除临时元素

    // 计算字体缩放比例，确保文本适配容器宽度
    let currentFontSize = parseFloat($container.css('fontSize'));
    if (textWidth > containerWidth) {
      currentFontSize = currentFontSize * (containerWidth / textWidth);
    }
    // 设置最小字体大小，避免字体过小无法阅读
    currentFontSize = Math.max(currentFontSize, 12);

    $container.css('fontSize', `${currentFontSize}px`);
  }
}).trigger('resize'); // 页面加载时触发一次，确保初始状态文本适配容器

额外优化：防抖处理 #

如果拖动时觉得字体缩放有点卡顿，可以给resize事件加个防抖，减少计算频率：

let resizeTimeout;
$('.resize').resizable({
  minWidth: 110,
  minHeight: 120,
  resize: function(event, ui) {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(() => {
      // 这里放字体计算逻辑
      const $container = $(this);
      const containerWidth = ui.size.width;
      const textContent = $container.text();

      const $tempSpan = $('<span>')
        .text(textContent)
        .css({
          whiteSpace: 'nowrap',
          fontSize: $container.css('fontSize'),
          position: 'absolute',
          visibility: 'hidden'
        })
        .appendTo('body');
      
      let textWidth = $tempSpan.width();
      $tempSpan.remove();

      let currentFontSize = parseFloat($container.css('fontSize'));
      if (textWidth > containerWidth) {
        currentFontSize = currentFontSize * (containerWidth / textWidth);
      }
      currentFontSize = Math.max(currentFontSize, 12);

      $container.css('fontSize', `${currentFontSize}px`);
    }, 50); // 50毫秒延迟，平衡流畅度和响应速度
  }
}).trigger('resize');

这样调整后，你拖动<div>的边缘时，字体就会自动缩放，文本始终保持在同一行啦！

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