Adjust Fontsize depending on div width

0
votes

I try to adjust the font-size in relation to the parent div.

See this fiddle: http://jsfiddle.net/hFgMs/

The div is 100px wide. So the more text you type the smaller the font-size should be and if you remove some chars the size should grow.

This works so far, but is ugly as hell. the transitions are "jumping" from time to time.

Any hints on how to fix it? :-)

Auto-size dynamic text to fill fixed size container did it. thanks

3
jquerycssfont-size

3 Answers

2
votes

Well... you could do the following.

Create a div which is outside the user view. put the text in it and then get the size of it when you put the text in it. Then you could see which size it gets and properly scale it down, rather then doing the count thighy... which is buggy by the way.. it jumps like hell for uneven or even numbers as far i can tell.

0
votes

Have a look at the sort-of-official documentation here, these are the relative unit's you'll have in css. http://www.w3.org/TR/css3-values/#font-relative-lengths

You might be able to do something with the viewport measurements, depending on your exact goal.

-1
votes

Sure, just use percentages.

Use percentages instead of pixels to define the size of the font in the text field.

http://jsfiddle.net/gsFx7/

div{
    font-size:100%;
    -webkit-transition:all 300ms;
}

div:hover{
    font-size:200%;
}

Should make is smoother.