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

Question

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

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

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

Answer 1

请参阅作为 TextFill jQuery 插件://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container">自动调整动态文本大小以填充固定大小的容器

Answer 2

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

它可以像这样工作：

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

• 将克隆的 font-size 设置为 1

• 构建一个循环

  1. 将字体大小增加一个像素
  2. 检查是否达到所需的宽度
  3. 如果有，则中断循环

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

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