CSS - calc() on font-size - 根据容器大小改变字体大小

Question

我有一个包含文本的容器元素 (div)。此文本有时会非常大 - 不是大段落，但它可能会超过文本的宽度。

显然，在大多数情况下，它只会将部分文本敲到下一行，但我想看看 calc() 是否可以用于 font-size 更改字体的大小以确保它始终适合其所在的 div 的范围。可以这样做吗？

.name { width: 500px; font-size: 64px; }

<span class="name">Sometimes it is short</span>

<span class="name">Sometimes it is going to be really long, and people put long names</span>

我可以限制人们可以用于名称的字母数量 - 我会在一定程度上限制，但我很好奇这是否可以实现。

我发现这篇文章是用 Javascript 做的，但那是很久以前的事了，我认为 CSS3 有很多新东西可以让这件事在没有任何脚本的情况下完成。 AutoFill

Answer 1

这里有一个可能的解决方案:

http://codepen.io/CrocoDillon/pen/fBJxu

p {
  margin: 0;
  font-size: calc(4vw + 4vh + 2vmin);
  /* See:
   * http://codepen.io/CrocoDillon/pen/jgmwt
   * For some math behind this
   */
}

字体大小是使用一个不完美的函数根据可用大小计算的，但在某些情况下可以调整以正常工作。