3

HTML:

<span> text </span>

CSS:

span{
  width: 200px;
  height: 200px;
  display: inline-block;
}

I would like to make text fit the size of the span. So if the span is 200x200, font should have like 72px height. If it's smaller, font-size should me smaller. Is this possible?

Setting a font size in percentages doesn't seem to have any effect.

thelolcat
  • 10,995
  • 21
  • 60
  • 102
  • possible duplicate http://stackoverflow.com/questions/10292001/how-to-set-font-size-based-on-container-size – Akki619 Aug 07 '13 at 13:33
  • 1
    interesting, but the `vw` thing doesn't seem to do what I want. I think the "viewport" is the page, not the container – thelolcat Aug 07 '13 at 13:37

2 Answers2

0
$(".container").each(function(){ //if container is a class
    $('.text', $(this)).css({'font-size': $(this).height()+"px"}); //you should only have 1 #text in your document, instead, use class
});

you can dynamically resize in jQuery like this:

$(window).resize(function(){
    $('#body #mytext').css('font-size',($(window).width()*0.5)+'px');
});
backtrack
  • 7,996
  • 5
  • 52
  • 99
0

I think using the em unit for height and font size is the best choice for the problem. I can't give the exact code, But Do this reading, it awesome and better for your future design.

http://www.w3.org/WAI/GL/css2em.htm

Rabin
  • 418
  • 3
  • 13