提问者:小点点

尽可能多地缩放固定大小<div>中的任何文本[duplicate]


我有一个固定大小的

(假设宽度为300px,高度为200px)和一个文本在里面。下面是我的结构:

标题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>

我希望在此固定大小的

中尽可能缩放文本字体大小(宽度和高度不超过
界限)。而且我想动态地做,所以它匹配任何文本长度。你知道我怎么做吗?

PS:这里有一个JS小提琴说明了这个问题:https://jsfidle.net/superkalo/nqf46tft/

编辑:我假设只有CSS的解决方案是不可能的。您知道有什么javascript技巧可以解决这个问题吗?


共1个答案

匿名用户

看看这个。但是,我认为你需要做很多工作。http://madebymike.com.au/writing/precise-control-responsive-typography/