尽可能多地缩放固定大小的中的任何文本[重复][英]Scale any text in fixed-size as much as possible [duplicate] 本文翻译自  Kaloyan Kosev  查看原文  2016-05-10  145    css/

This question already has an answer here:

这个问题在这里已有答案:

• Font scaling based on width of container 30 answers

基于容器30的宽度的字体缩放答案

• HTML / CSS - adjust font-size to fill parent height and width 5 answers

HTML / CSS - 调整字体大小以填充父高度和宽度5答案

I have a fixed size <header> (let's say 300px in width by 200px in height) and a text inside. Here's my structure:

我有一个固定大小的

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

Header 1:

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

I have multiple headers just like this, but with various text length, example:

我有这样的多个标题,但有不同的文本长度,例如:

Header 2:

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

Header 3:

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

I want scale the text font-size in this fixed-size <header> as much as possible (without exceeding the <header> bounds, in width and height). And I want to do it dynamically, so it matches any text length. Do you have any ideas how I can do that?

我希望尽可能在这个固定大小的

中缩放文本字体大小(不超过

边界,宽度和高度)。我想动态地做,所以它匹配任何文本长度。你有什么想法我能做到吗?

PS: Here's a JS fiddle that illustrates the problem: https://jsfiddle.net/superKalo/nqf46tft/

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

Edit: I assume a CSS only solution is not possible. Do you know any javascript trick that would solve this problem?

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

1 个解决方案

#1

Check this out. But, i think you need to do a lot of work. http://madebymike.com.au/writing/precise-control-responsive-typography/

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