20

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

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.

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.

Can it be done with pure CSS?

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

MHD
  • 1,245
  • 2
  • 12
  • 18
  • 1
    I don't think you can do it without using jquery, check out this answer: http://stackoverflow.com/questions/4408937/font-size-auto-adjust-to-fit – Robert Jan 24 '12 at 17:15
  • I'd second that. This can't be done with pure CSS. – Jonas Jan 29 '12 at 21:39
  • Your best results will probably be with some calc() magic in your font-size. I did some experimenting with that, but really, if you don't have variables and you can't determine the width of individual characters, you can't do this with CSS. You probably know of [FitText](http://fittextjs.com), but that's the easy way of doing this with JS otherwise – saves you a lot of work :) Do tell us if you come up with some intriguing solution, btw. – fredrikekelund Apr 11 '12 at 23:06
  • 2
    The "no" answer is a bit out-of-date. Almost all major browsers support vh, vw, and vmin viewport units now, with Opera being the main exception. http://caniuse.com/viewport-units – Mark Mar 21 '13 at 22:52
  • Second Mark's comment, and Opera's switch to webkit makes them support it now too – DMTintner May 17 '13 at 17:34
  • Hmm... well, how would you do it with vw or vh? – Costa Michailidis Jun 04 '15 at 20:51
  • As Miss A posted below, see: https://css-tricks.com/viewport-sized-typography/ for a demo. – MHD Jun 06 '15 at 08:13

1 Answers1

6

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.

Sharpless512
  • 3,062
  • 5
  • 35
  • 60
Tyler
  • 244
  • 3
  • 12