javascript - 尽可能缩放固定大小的 <div> 中的任何文本

<分区>

我有固定尺寸 <header> (假设宽度为 300 像素，高度为 200 像素)和里面的文本。这是我的结构:

标题 1:

<header>
  <h1>
     This is example title, but the text length might be different.
  </h1>
</header>

我有多个像这样的标题，但文本长度各不相同，例如:

标题 2:

<header>
  <h1>
     This is small-length text.
  </h1>
</header>

标题 3:

<header>
  <h1>
     This is bigger-length text. This is example title, but the text length might be different.
  </h1>
</header>

我想缩放这个固定大小的文本字体大小 <header>尽可能多(不超过 <header> 宽度和高度的界限)。我想动态地做，所以它匹配任何文本长度。你知道我该怎么做吗？

PS:这是一个说明问题的 JS fiddle:https://jsfiddle.net/superKalo/nqf46tft/

编辑:我认为仅 CSS 的解决方案是不可能的。您知道可以解决此问题的任何 JavaScript 技巧吗？

最佳答案

关于javascript - 尽可能缩放固定大小的 <div> 中的任何文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37135219/

相关文章：

CSS - 内联 block 元素之间的奇数边距