0

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

0

3 Answers 3

2

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

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

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.

1
  • Unfortunately it's not possible :(
    – Jens
    Oct 17, 2012 at 22:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.