纯 CSS 根据动态字符数量使字体大小响应

Question

我知道这可以用 Javascript 很容易地解决，但我只对纯 CSS 解决方案感兴趣。

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

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

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

</div>

我在想，也许这可以通过在 ems 中指定容器的宽度，并让字体大小继承该值来实现？

Answer 1

注意：此解决方案根据视口大小而不是内容量而变化

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

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

http://css-tricks.com/viewport-sized-typography/ 和 https://medium.com/design-
ux/66bddb327bb1