一尘不染

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

css

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

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

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

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

</div>

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


阅读 733

收藏
2020-05-16

共1个答案

一尘不染

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

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