CSS 放大文本大小以适合容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8990999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Have text scale up in size to fit the container
提问by MHD
Using CSS, and specifically no onload javascript, would it be possible to do this:
使用 CSS，特别是没有 onload javascript，是否可以做到这一点：
You have a cell of 150px wide and 100px in height. It contains a text, e.g.: $20,00 or any variant of that.
您有一个宽 150 像素、高 100 像素的单元格。它包含一个文本，例如：$20,00 或它的任何变体。
You want it to perfectly fit the size of the container.
您希望它完全适合容器的大小。
I'd be able to do it with javascript, size up the text until a container without padding/margin reaches the cell's width and/or height. Or contain it in something that has an overflow set to auto and see when it overflows or something.
我可以用 javascript 做到这一点，放大文本直到没有填充/边距的容器达到单元格的宽度和/或高度。或者将它包含在溢出设置为自动的东西中，看看它何时溢出或其他东西。
Can it be done with pure CSS?
可以用纯 CSS 来完成吗？
Take into account that the font isn't a fixed size font, either. Use Arial if you like.
考虑到字体也不是固定大小的字体。如果您愿意，请使用 Arial。
采纳答案by Tyler
One thing that I have done that isnt perfect but can get the job done in some cases is to use a @media rule for screen sizes smaller then X pixels, set the font size smaller or larger.
我所做的一件并不完美但在某些情况下可以完成工作的事情是对小于 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;
}
}
Of course this would only work assuming the texts container size is based on the window size in some way.
当然，这仅适用于假设文本容器大小以某种方式基于窗口大小的情况。
回答by Miss A
Check this out: http://css-tricks.com/viewport-sized-typography/
看看这个：http: //css-tricks.com/viewport-sized-typography/
Unfortunately this only works in Chrome 20+ & IE 10+ so for now you'll have to stick with a js solution....
不幸的是，这只适用于 Chrome 20+ 和 IE 10+，所以现在你必须坚持使用js 解决方案......
