Fitty.js：如何在鼠标悬停时强制重新计算字体大小？

一、修复.title容器的少量溢出问题 #

1. 提升Fitty计算精度：Fitty默认accuracy参数为2，精度越高适配越精准，将其设为1可减少溢出情况：

const titleFitty = fitty('.title', {
  accuracy: 1,
  multiLine: true,
  observeMutations: true
});

2. 修正容器尺寸计算逻辑：给容器添加box-sizing: border-box，避免padding、border占用容器宽度导致计算偏差：

.title, .details {
  box-sizing: border-box;
}

二、解决.details容器的高度适配问题 #

Fitty原生仅支持按容器宽度适配文本，不处理高度约束，这是字号停在minSize的核心原因。可通过以下方式改造适配逻辑：

1. 确保容器尺寸明确 #

无论使用固定宽高还是CSS Grid布局，必须让.details容器的宽高能被准确获取，避免动态尺寸导致Fitty计算失效。比如Grid布局时，明确网格项的尺寸规则。

2. 自定义高度适配的重算逻辑 #

鼠标悬停时，不只是调用Fitty的fit()方法，而是手动结合容器高度调整字号：

// 初始化.details的Fitty实例
const detailsFitty = fitty('.details', {
  minSize: 12,
  maxSize: 36,
  multiLine: true,
  observeMutations: true
});

// 绑定hover事件，自定义高度适配逻辑
$('.details').hover(function() {
  const $container = $(this);
  const $textEl = $container.find('.fitty');
  const containerHeight = $container.innerHeight();
  let fontSize = parseInt($textEl.css('font-size'));
  const maxSize = detailsFitty.options.maxSize;
  const minSize = detailsFitty.options.minSize;

  // 先尝试增大字号至不超过容器高度或maxSize
  while ($textEl.innerHeight() < containerHeight && fontSize < maxSize) {
    fontSize++;
    $textEl.css('font-size', `${fontSize}px`);
  }

  // 再回退到刚好不溢出的字号
  while ($textEl.innerHeight() > containerHeight && fontSize > minSize) {
    fontSize--;
    $textEl.css('font-size', `${fontSize}px`);
  }

  // 同步Fitty实例的内部字号记录，避免后续自动计算冲突
  detailsFitty.forEach(instance => {
    instance.currentFontSize = fontSize;
  });
});

3. 额外优化 #

• 如果.details容器内容会动态变化，开启observeMutations: true让Fitty自动监听内容变更并重新计算。
• 若hover时重算有延迟，可提前缓存容器高度，减少DOM查询次数。

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