放大文本大小以适合容器 [英] Have text scale up in size to fit the container

问题描述

使用 CSS，特别是不使用 onload javascript，是否可以做到这一点:

Using CSS, and specifically no onload javascript, would it be possible to do this:

您有一个宽 150 像素、高 100 像素的单元格.它包含一个文本，例如:$20,00 或它的任何变体.

You have a cell of 150px wide and 100px in height. It contains a text, e.g.: $20,00 or any variant of that.

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

You want it to perfectly fit the size of the container.

我可以使用 javascript 来完成，调整文本大小，直到没有填充/边距的容器达到单元格的宽度和/或高度.或者将它包含在溢出设置为自动的东西中，看看它何时溢出或其他东西.

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.

可以用纯 CSS 来完成吗?

Can it be done with pure CSS?

考虑到字体也不是固定大小的字体.如果您愿意，请使用 Arial.

Take into account that the font isn't a fixed size font, either. Use Arial if you like.

推荐答案

我做过的一件并不完美但在某些情况下可以完成工作的事情是对小于 X 像素的屏幕尺寸使用 @media 规则，将字体大小设置得更小或更大.

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.

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.

这篇关于放大文本大小以适合容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！