将文本缩放成适合容器的大小

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (10)

如果使用CSS,特别是不使用onload javascript,是否可以这样做:

你有一个150 px宽和100 px高度的单元格。它包含一个文本,例如:$20,00或任何变体。

你想要它完全符合容器的大小。

我可以用javascript来完成它,调整文本大小,直到没有填充/边距的容器达到单元格的宽度和/或高度。或将其包含在设置为AUTOW的溢出项中,并查看溢出或其他内容。

它能用纯CSS完成吗?

提问于
用户回答回答于

我所做的一件事并不完美,但在某些情况下可以完成任务,就是对屏幕大小小于X像素的屏幕使用@media规则,将字体大小设置得更小或更大。

h2{
  font-size:25px
}

@media screen and (max-width: 850px){/* for screens smaller then 850px, set the font size smaller */
   h2{
     font-size:19px;
   }
}

当然,这只会在假定文本容器大小是基于窗口大小的情况下才能工作。

用户回答回答于

不幸的是,这只适用于Chrome 20+和IE10+,所以现在您必须坚持使用JS解决方案.

扫码关注云+社区