javascript - JavaScript / jQuery：是否可以更改字体大小以填充设定的宽度？

Question

我正在编写一个应用程序，在其中，我想要一些具有可变字体大小的 h1 元素。

我使用 div 的全宽（1000 像素）作为限制器，并使用一个脚本自动设置 h1 元素的字体，使其适合 div 的宽度而无需换行。

使用 php GD 很容易做到这一点，但我想我想做这个客户端。

Answer 1

请参阅作为答案的一部分创建的TextFill jQuery 插件Auto-size dynamic text to fill fixed size container

Answer 2

我认为没有为此预先构建的功能。我想你别无选择，只能运行一个循环并调整元素的大小，直到它适合。

它可以像这样工作：

• 使用 jQuery 创建 DIV 的克隆，例如element = $('element_id').clone()

• 将克隆设置font-size为1

• 建立一个循环

  1. 增加font-size一个像素
  2. 检查是否已达到所需宽度
  3. 如果有，则打破循环

然后font-size，克隆元素中的 将是您所需宽度的最接近匹配项。

更新： @Pär 的答案中引用的插件正是这样做的。