更改字体大小以适应可变宽度容器

Posted 2023-03-06

【中文标题】更改字体大小以适应可变宽度容器

【英文标题】：Change font size to fit a variable width container

【发布时间】：2015-04-07 03:11:56

【问题描述】：

我正在尝试使用jQuery TextFill 流畅地缩放字体大小以填充其可变宽度容器。麻烦的是，我认为这只适用于固定宽度的容器。我想在具有响应式网格的网站上使用它。

这是我的测试，它确认 jQuery TextFill 不适用于可变宽度容器： http://jsfiddle.net/9uqcjdpy/1/

如果您调整窗口大小，您会看到底部 div 调整大小，但文本不会缩放。如果您更改顶部容器的像素宽度，您将看到文本缩放，但 div 无法响应地调整大小。

我也尝试在一个高度与宽度成比例的容器中使用这种填充方法：

width: 40%;
padding-bottom: 23%;
height: 0;

有什么办法可以让它工作吗？不需要使用 jQuery TextFill，但这是我找到的最接近的东西。

【问题讨论】：

即使您有一个指向您的代码的链接，在您的问题中发布代码仍然非常好。此外，Stack Snippets（关于它们的一些信息here）让您可以在这里运行您的代码。

【参考方案1】：

从您的 variablewidth 类中删除 height。

您需要使用 TextFill 的 widthOnly 选项，并在窗口 resize 事件上更新：

$(window).resize(function() 
  $('.variablewidth').textfill( 
    maxFontPixels: 250,
    widthOnly: true 
  );
);

$(window).resize();

Fiddle

---

更新

你可以像这样使高度成为宽度的函数：

function updateTextFill() 
  $('.variablewidth')
    .height($('.variablewidth').width()/2)
    .textfill(
      maxFontPixels: 250
    );
;

但请注意，maxFontPixels 中可能存在错误，如我们的 cmets 中所述。

Fiddle #2

【讨论】：

谢谢——问题是我希望容器的高度与宽度成正比...

再次感谢。不幸的是，我也需要设置高度，因为我希望使用 CMS 来实现这一点，其中容器中的文本内容可以更改，从而导致文本长度不同。我需要容器进行缩放（始终保持其纵横比相同）并让任意数量的文本填充该容器。

不确定我是否理解，但您可以在调整大小事件中将高度设为宽度的函数。如果您发布一个显示此问题的小提琴，我会看看我能做些什么。

嗯，我只是在寻找一种在保持比例的同时响应地放大 div 的方法，并使用 TextFill 之类的东西来获取我放入 div 中的任何文本以尽可能大同时适应它。

我的示例小提琴在您调整窗口大小时保持比例。如果您不希望文本换行，您可以像我在这里所做的那样将 white-space: nowrap; 添加到 CSS 中：jsfiddle.net/e40xnk5d/2 如果这些都不是您想要的，也许截图可以帮助我理解。

【参考方案2】：

快速 jQuery 插件：http://www.jqueryscript.net/text/jQuery-Plugin-For-Auto-Resizing-Text-textfill.html 不错的演示：http://www.jqueryscript.net/demo/jQuery-Plugin-For-Auto-Resizing-Text-textfill/

【讨论】：

我的帖子中提到我已经希望使用这个插件，但我想在 可变宽度容器 中实现相同的效果，该插件不支持.