Question

我有一个固定大小<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小提琴：https://jsfiddle.net/superKalo/nqf46tft/

编辑：我认为不可能只使用CSS解决方案。你知道任何可以解决这个问题的javascript技巧吗？

Answer 1