如何让文本铺满Div无留白并适配字号？含FitText.js使用问题

没问题，我来帮你搞定这个需求！要实现文本铺满Div边缘、消除留白，同时让加粗文本字号大于普通文本，咱们可以从清除默认内外边距和针对性配置FitText参数两方面入手：

第一步：清除容器与文本的默认留白 #

浏览器默认会给<p>标签添加外边距，容器也可能有默认内边距，这是导致留白的主要原因。先通过CSS清除这些默认样式：

/* 清除容器内边距，确保文本贴到容器边缘 */
.m-card__text-front {
  padding: 0;
  /* 给容器设置明确宽度，FitText需要基于父容器宽度计算字号 */
  width: 100%; /* 可根据你的实际布局调整为固定值，比如300px */
}

/* 清除段落默认外边距，消除上下留白 */
.fit-text {
  margin: 0;
  /* 强制文本单行显示，确保FitText计算出的字号能铺满容器宽度 */
  white-space: nowrap;
}

/* 确保加粗样式生效 */
.is-bold {
  font-weight: 700;
}

第二步：给普通/加粗文本分别配置FitText #

FitText的第一个参数是压缩率，数值越小，计算出的字号越大。咱们给加粗文本设置更小的压缩率，让它的字号比普通文本更大：

// 普通文本：保持你原来的0.8压缩率
$('.fit-text:not(.is-bold)').fitText(0.8);

// 加粗文本：用更小的压缩率（比如0.6），让字号更大
$('.fit-text.is-bold').fitText(0.6);

为什么这样做？ #

• 清除padding和margin直接消除了容器内的留白，让文本完全贴合容器边缘；
• white-space: nowrap确保文本不换行，FitText会基于单行文本的长度计算最大可能的字号，刚好铺满容器宽度；
• 给加粗文本单独设置更小的压缩率，利用FitText的计算逻辑，让加粗文本的字号自然大于普通文本，完美匹配你的需求。

如果你的容器是弹性布局或者有其他特殊样式，只需要确保.m-card__text-front有明确的宽度值（比如固定宽度或占满父容器），FitText就能正常工作啦！

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