纯CSS，可根据动态字符数量对字体大小做出响应

Question

我知道可以使用Javascript轻松解决此问题，但是我只对纯CSS解决方案感兴趣。

我想要一种动态调整文本大小的方法，以使其始终适合固定的div。这是示例标记：

<div style="width: 200px; height: 1em; overflow: hidden;">

  <p>Some sample dynamic amount of text here</p>

</div>

我在想，也许可以通过在ems中指定容器的宽度，并让font-size继承该值来实现？

Answer 1

我刚刚发现，使用大众汽车是可能的。它们是与设置视口宽度相关的单位。有一些缺点，例如缺乏对旧版浏览器的支持，但这绝对是认真考虑使用的东西。另外，您仍然可以为旧版浏览器提供后备广告，例如：

p {
    font-size: 30px;
    font-size: 3.5vw;
}