CODEWITHSUNDEEP
jquerycssfont-size
Jens
Jens

Reputation: 345

Adjust Fontsize depending on div width

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

Upvotes: 0

Views: 3221

Answers (3)

lededje
lededje

Reputation: 1869

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.

Upvotes: -1

Jasper Kennis
Jasper Kennis

Reputation: 3062

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.

Upvotes: 0

Sangoku
Sangoku

Reputation: 1606

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.

Upvotes: 2

Related Questions