Jump to content

Adjust Font-size

Lefteris

By Lefteris
in CSS

Recommended Posts

Lefteris Newbie

Lefteris

Posted
Posted

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

Link to comment
Share on other sites
RainsMirage Newbie

RainsMirage

Posted
Posted

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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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
Lefteris Newbie

Lefteris

Posted
  • Author
Posted

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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...