代码示例

Question

我忙着工作的网站有一个标题非常大的部分。我不确定如何处理：

标题可以是两个短或长的单词，例如：＆＃34;塞浦路斯＆＃34;到＆＃34; Nouvelle Zelande＆＃34;，它必须缩放到大致视口的宽度。这意味着＆＃34;塞浦路斯＆＃34;，更短，将有更大的个人角色比＃34; Nouvelle Zelande＆＃34;。

更长的文字

我认为这对JavaScript来说相对容易，但是我想要一个纯HTML / CSS解决方案。那么：如何缩放文字以适应视口的宽度？到目前为止，我自己也不知道如何做到这一点。

一些细节：

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

请注意，视口单元不是解决方案。以前提出此问题的问题（Pure CSS to make font-size responsive based on dynamic amount of characters，Font scaling based on width of container）的答案为＆＃34;使用视口单元，例如{ {1}}！＆＃34;，但根本没有处理这种情况，精明的读者甚至pointed这个out。我甚至在下面的代码示例中使用vw来演示其非解决方案。它根据视口的大小很好，但不会根据文本的数量进行任何大小调整。

代码示例

＆＃13;

vw

＆＃13;

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

＆＃13;

Answer 1

如果您想使用插件，那么

http://fittextjs.com/

能为你做到这一点

Answer 2

唯一一个单位，如果用于设置字体大小，相对于其容器的大小，则是视口单元vw / vh，这不会单独解决您的情况，即使容器的宽度与视口的宽度相同，因为它不会将字母大小计算为 fit 到容器中。

我能提出的最接近的非脚本解决方案是使用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修改。 < / p>

如果您想要完美契合，请查看以下帖子：fit-text-perfectly-inside-a-div

如何缩放任意文本以始终适合视口宽度？

代码示例

2 个答案: