html - 如何缩放任意文本以始终适合视口(viewport)宽度？

Question

我正忙于工作的网站有一个部分有一些非常大的标题。有些事情我不确定如何处理:

标题可以是一两个短词或长词，例如:“Cyprus”到“Nouvelle Zelande”，并且它必须缩放到大约视口(viewport)的宽度。意思是“Cyprus” ，比“Nouvelle Zelande”更短，将比更长的文本具有更大的单个字符。

我认为使用 JavaScript 会相对容易，但我想采用纯 HTML/CSS 解决方案。所以:我怎样才能缩放文本以适合视口(viewport)的宽度？到目前为止，我自己也很困惑，不知道该怎么做。

一些细节:

• 您只需定位每个浏览器的最新版本，包括 IE11。
• 您可以使用在这些浏览器中运行的任何和所有 HTML5 和 CSS3。
• 如果您将文本“Nouvelle Zelande”自动换行，只要这两个词中较长的一个仍然大致适合可用宽度即可。
• 您可以在标题内部/周围添加额外的元素。

---

请注意，视口(viewport)单位不是解决方案。之前询问此问题(Pure CSS to make font-size responsive based on dynamic amount of characters、Font scaling based on width of container)的答案是“使用视口(viewport)单位，如 vw !”，但这根本无法处理这种情况，精明的读者甚至 pointed这个out .我什至在下面的代码示例中使用了 vw 来证明它的非解决方案。它会根据视口(viewport)调整大小，但不会根据文本量调整大小。

代码示例

h2 {
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 14vw;
  white-space: nowrap;
  overflow-x: hidden;
  margin: 0;
}

<h2>Nouvelle Zelande</h2>
<h2>Australia</h2>
<h2>Cyprus</h2>

Answer 1

如果用于设置字体大小，即相对于其容器大小的唯一单位是视口(viewport)单位vw/vh，这将无法解决仅针对您的情况，即使容器与视口(viewport)的宽度相同，因为它不会计算字母大小以适合到容器中。

我能想到的最接近的非脚本解决方案是使用 CSS 元素计数器技巧，并将每个字母包装在 span

我在这里设置的 130vw 最适合给定的字体，尽管这可能需要根据所使用的字体系列进行调整。

h2 {
  display: inline-block;
  font-family: sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-x: hidden;
  margin: 0;
}

/* 1 letter */
h2 span:first-child:nth-last-child(1) {
    font-size: 130vw;
}
/* skipped 2-5 in this demo */

/* 6 letters */
h2 span:first-child:nth-last-child(6),
h2 span:first-child:nth-last-child(6) ~ span {
    font-size: calc(130vw / 6);
}

/* skipped 7-14 in this demo */

/* 15 letters */
h2 span:first-child:nth-last-child(15),
h2 span:first-child:nth-last-child(15) ~ span {
    font-size: calc(130vw / 15);
}

<h2><span>N</span><span>o</span><span>u</span><span>v</span><span>e</span><span>l</span><span>l</span><span>e</span> &nbsp;<span>Z</span><span>e</span><span>l</span><span>a</span><span>n</span><span>d</span><span>e</span></h2><br>
<h2><span>C</span><span>y</span><span>p</span><span>r</span><span>u</span><span>s</span></h2>

---

这是使用脚本的相同概念，但没有 span

(function (d,t) {
  window.addEventListener("resize", throttler, false);
  window.addEventListener("load", throttler(), false);  /*  run once on load to init  */
  
  function throttler() {
    if ( !t ) {
      t = setTimeout(function() {
        t = null;
        keepTextFit(d.querySelectorAll('h2'));
       }, 66);
    }
  }
  function keepTextFit(el) {
    var f = el[0].getAttribute("data-font");
    for (var i = 0; i < el.length; i++) {
      var c = el[i].textContent.split('').length;      
      el[i].style.cssText = 
        'font-size: calc(' + f + ' / ' + c + ')';
    }
  }
})(document,null);

h2 {
  display: inline-block;
  font-family: sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-x: hidden;
  margin: 0;
}

<h2 data-font="130vw">Nouvelle Zelande</h2>
<h2>Australia</h2>
<h2>Cyprus</h2>

请注意，自 resize events可以以高速率触发，节流器用于降低速率，因此处理程序不会过于频繁地执行昂贵的操作，例如 DOM 修改。

---

如果您想完美契合，请查看此帖子:fit-text-perfectly-inside-a-div