让文字按比例放大以适应容器

使用CSS，特别是没有onload javascript，是否有可能这样做：让文字按比例放大以适应容器

您有一个宽150px，高100px的单元格。它包含一个文本，例如：$ 20,00或其任何变体。

您希望它完全适合容器的大小。

我可以用javascript做到这一点，直到没有填充/边距的容器达到单元格的宽度和/或高度为止。或者将其包含在某个溢出设置为auto的东西中，并查看它何时溢出或什么。

可以用纯CSS完成吗？

考虑到字体也不是固定大小的字体。如果你喜欢，请使用Arial。

来源

2012-01-24 MHD

我不认为你可以做到这一点，而不使用jQuery，看看这个答案：http://stackoverflow.com/questions/4408937/font-size-auto-adjust-to-fit – Robert

我会第二。这不能用纯CSS完成。 – Jonas

您的最佳结果可能会与您的字体大小calc（）魔术。我对此做了一些尝试，但实际上，如果您没有变量并且无法确定单个字符的宽度，则无法使用CSS进行此操作。你可能知道[FitText]（http://fittextjs.com），但这是用JS做这件事的简单方法 - 否则可以节省很多工作:)请告诉我们，如果你想出一些有趣的解决方案，btw 。 – fredrikekelund

有一两件事，我已经做了这并不完美，但可以在某些情况下完成这项工作，是对尺寸小于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; 
    } 
}

当然这只适用于假定文本容器大小以某种方式基于窗口大小。

来源

2012-12-21 18:40:02 Tyler

检查了这一点：http://css-tricks.com/viewport-sized-typography/

不幸的是在Chrome 20+ & IE 10+所以现在你必须坚持a js solution ....这只能

来源

2012-08-23 20:22:54

让文字按比例放大以适应容器

回答

相关问题