纯 CSS 根据动态字符数量使字体大小响应
我知道这可以用 Javascript 很容易地解决,但我只对纯 CSS 解决方案感兴趣。
我想要一种动态调整文本大小的方法,以便它始终适合固定的 div。这是示例标记:
<div style="width: 200px; height: 1em; overflow: hidden;">
<p>Some sample dynamic amount of text here</p>
</div>
我在想,也许这可以通过在 ems 中指定容器的宽度,并让字体大小继承该值来实现?
-
注意:此解决方案根据视口大小而不是内容量而变化
我刚刚发现使用大众单位可以做到这一点。它们是与设置视口宽度相关的单位。有一些缺点,例如缺乏对旧版浏览器的支持,但这绝对是要认真考虑使用的东西。另外,您仍然可以为旧浏览器提供后备,如下所示:
p { font-size: 30px; font-size: 3.5vw; }
http://css-tricks.com/viewport-sized-typography/ 和 https://medium.com/design-
ux/66bddb327bb1