我知道可以使用Javascript轻松解决此问题,但是我只对纯CSS解决方案感兴趣。
我想要一种动态调整文本大小的方法,以使其始终适合固定的div。这是示例标记:
<div style="width: 200px; height: 1em; overflow: hidden;"> <p>Some sample dynamic amount of text here</p> </div>
我在想,也许可以通过在ems中指定容器的宽度,并让font-size继承该值来实现?
我刚刚发现,使用大众汽车是可能的。它们是与设置视口宽度相关的单位。有一些缺点,例如缺乏对旧版浏览器的支持,但这绝对是认真考虑使用的东西。另外,您仍然可以为旧版浏览器提供后备广告,例如:
p { font-size: 30px; font-size: 3.5vw; }