Css 使文本按比例放大以适合容器

使用CSS，特别是无加载javascript，是否可以做到这一点：

你有一个150像素宽，100像素高的电池。 它包含一个文本，例如：$20,00或其任何变体

您希望它完全适合容器的大小

我可以用javascript来做，调整文本大小，直到没有填充/边距的容器达到单元格的宽度和/或高度。或者将其包含在溢出设置为“自动”的内容中，并查看其何时溢出或其他内容

可以用纯CSS实现吗

考虑到字体也不是固定大小的字体。如果您愿意，请使用Arial。

查看以下内容：

---

不幸的是，这只适用于Chrome 20+&IE 10+，所以现在你必须坚持……

我做的一件事并不完美，但在某些情况下可以完成这项工作，那就是对小于X像素的屏幕大小使用@media规则，将字体大小设置为更小或更大

h2{
  font-size:25px
}

@media screen and (max-width: 850px){/* for screens smaller then 850px, set the font size smaller */
   h2{
     font-size:19px;
   }
}

---

当然，如果文本容器的大小在某种程度上取决于窗口的大小，那么这就行了。

我认为如果不使用jquery，您无法做到这一点，请查看以下答案：我支持这一点。纯CSS无法做到这一点。最好的结果可能是在字体大小中加入一些calc（）魔法。我对此做了一些实验，但实际上，如果你没有变量，你不能确定单个字符的宽度，你就不能用CSS来做这件事。你可能知道，但这是用JS做这件事的简单方法，否则会为你节省很多工作：）顺便说一句，如果你提出了一些有趣的解决方案，请告诉我们。答案“否”有点过时了。现在几乎所有主流浏览器都支持vh、vw和vmin视口单元，Opera是主要的例外。第二个马克的评论，以及Opera转向webkit，使他们现在也支持它