Jump to content

Adjust Font-size


Lefteris
 Share

Recommended Posts

Hello all,The topic title is pretty-self explanatory.Say I have 5 divs in a row, all containing a word or a small phrase. And they are all enveloped in one greater div to hold them. I want to achieve one of two things:

  • Either, have these 5 divs be all of the same size and adjust the text's font-size inside them to fit their size.
  • Or, make it even more modular and not give the same size to these 5 divs, but still adjust the font-size of their inner text, so that it just fits inside the div and so that all 5 divs size still stays inside the bigger containing div

Can you throw any ideas? I was searching for a way to adjust the font-size to fit a div but I found none. My other alternative woulde be to go javascript but I would like to exhaust my CSS-only options first. Thanks for your assistance!-Lefteris

Edited by Lefteris
Link to comment
Share on other sites

Give the div's an seperate id. Then in your style sheet make a block for each div id. That's what I would do.

Link to comment
Share on other sites

Do I get this right?you want text in the rows if more than 2 (or more lines), to be reduced (font-size) automatically? to 1 line? to fit in div?Taking in account that font-size minimum limit is 9px (if i remember rightly), you will have to limit the text to the total numbers of characters in font-size 9px that will fill the width of the div rows.automatic adjustment of font size, could be accomplished with using javascript + html domOR manual adjustment//////////////////////////between head tags///////////////////////////////////////<style>body { font-family: Arial; }.outer, .row1, .row2, .row3, .row4, .row5 {width: 200px; float: left;}.row1, .row2, .row3, .row4, .row5 {height: 17px;} /*should match height of tallest font size (+2px) you wish to use ( allowing for 1 row of text only)*/.row1 {font-size: 9px;}.row2 {font-size: 12px;}.row3 {font-size: 10px;}.row4 {font-size: 15px;}.row5 {font-size: 10px;}</style>//////////////////////////////between body tags///////////////////<div class="outer"><div class="row1">text here</div><div class="row2">text here</div><div class="row3">text here</div><div class="row4">text here</div><div class="row5">text here</div></div>

Edited by dsonesuk
Link to comment
Share on other sites

If you require auto font size adjustment, i just put this together.limit the text entered in the div to 38 including space's.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">* {padding: 0; margin:0}body { font-family:Verdana, Arial, Helvetica, sans-serif; margin: 10px;}.outer {width: 980px; border: 1px solid #000; float:left; padding: 2px;}#content1, #content2, #content3, #content4, #content5  {  width: 194px; border: 1px solid lime; float: left; text-align:left; text-align:center; vertical-align:middle; position: relative;}</style></head><body><div class="outer"><div id="content1"  style="line-height: 11px; font-size: 9px;">xxxxxxxxx</div><div id="content2"  style="line-height: 11px; font-size: 9px;">jg jg jhg jhg jhg jhg jhg jhg jhg </div><div id="content3"  style="line-height: 11px; font-size: 9px;">jg jg jhg jhg jh </div><div id="content4"  style="line-height: 11px; font-size: 9px;">jg jg jhg jhg jhg jhg jhg jhg jhg jhg </div><div id="content5"  style="line-height: 11px; font-size: 9px;">jg j </div></div><script type="text/javascript">countLines();function countLines() {var setdivheight = 30;var lines;var divHeight;var lineHeight;var thisfontsize;var count;for(i=1;i<6;i++)    {        contentid = document.getElementById('content'+i);        thisfontsize = contentid.style.fontSize.replace("px","");        divHeight = parseInt(contentid.offsetHeight);        lineHeight = parseInt(contentid.style.lineHeight);        lines = divHeight / lineHeight;        count = thisfontsize;        while (parseInt(lines)==1 && count<=(setdivheight-2))    {    contentid.style.fontSize=count+"px";    divHeight = parseInt(contentid.offsetHeight);        lineHeight = parseInt(contentid.style.lineHeight);            lines = divHeight / lineHeight;        count++;        }        contentid.style.fontSize=(count-2)+"px";    contentid.style.lineHeight=(setdivheight-8)+"px";    contentid.style.height=setdivheight+"px";        }    }</script></body></html>

Link to comment
Share on other sites

Hm ... I see that it is not possible by CSS alone. Anyhow using javascript seems like the only other option.Thank you very much for actually coding the whole thing. It is a lot more than I expected. I will experiment a little with it and figure out how to make it fullfill my needs.

Link to comment
Share on other sites

here is new code with crappy IE 6 Fix

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">* {padding: 0; margin:0;}body { font-family:Verdana, Arial, Helvetica, sans-serif; margin: 10px;}#outer {width: 980px; border: 1px solid #000; float:left; padding: 2px !important; padding-bottom: 0px; }#content1, #content2, #content3, #content4, #content5  {  width: 194px; border: 1px solid lime; float: left; text-align:center; position: relative;}#content1 span, #content2 span, #content3 span, #content4 span, #content5 span {  position: relative; } </style></head><body><div id="outer"><div id="content1"  style="line-height: 11px; font-size: 9px;"><span>xxxxxxxxx</span></div><div id="content2"  style="line-height: 11px; font-size: 9px;"><span>jg jg jhg jhg jhg jhg jhg jhg jhg </span></div><div id="content3"  style="line-height: 11px; font-size: 9px;"><span>jg jg jhg jhg jh </span></div><div id="content4"  style="line-height: 11px; font-size: 9px;"><span>jg jg jhg jhg jhg jhg jhg jhg jhg jhg </span></div><div id="content5"  style="line-height: 11px; font-size: 9px;"><span>jg j </span></div></div><script type="text/javascript">countLines();function countLines() {var setdivheight = 30;var lines;var divHeight;var lineHeight;var thisfontsize;var count;for(i=1;i<6;i++)    {        contentid = document.getElementById('content'+i);        thisfontsize = contentid.style.fontSize.replace("px","");        divHeight = parseInt(contentid.offsetHeight);        lineHeight = parseInt(contentid.style.lineHeight);        lines = divHeight / lineHeight;        count = thisfontsize;        while (parseInt(lines)==1 && count<=(setdivheight-2))    {    contentid.style.fontSize=count+"px";    divHeight = parseInt(contentid.offsetHeight);        lineHeight = parseInt(contentid.style.lineHeight);            lines = divHeight / lineHeight;        count++;        }        contentid.style.fontSize=(count-2)+"px";    contentid.style.lineHeight=(setdivheight-8)+"px";    contentid.style.height=setdivheight+"px";                }    }</script></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...