Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font size auto adjust to fit

Tags:

I'm trying to do what the title says. I've seen that font-size can be a percentage. So my guess was that font-size: 100%; would do it, but no.

Here is an example: http://jsfiddle.net/xVB3t/

Can I get some help please?

(If is necesary to do it programatically with js there is no problem)

like image 403
Diego Avatar asked Dec 10 '10 12:12

Diego


People also ask

How do I Auto Adjust font size in CSS?

Syntax: font-size-adjust: number|none|initial|inherit; Below are the examples that illustrates the use of font-size-adjust property.

What is font-size-adjust?

The font-size-adjust property gives you better control of the font size when the first selected font is not available. When a font is not available, the browser uses the second specified font. This could result in a big change for the font size. To prevent this, use the font-size-adjust property.

How do you AutoFit a text box in Word?

Click anywhere in the text. On the Format menu, point to AutoFit Text, and do one of the following: To reduce the point size of text until there is no text in overflow, click Shrink Text On Overflow. To shrink or expand text to fit in the text box when you resize the box, click Best Fit.

How do I Auto Adjust font size in Excel?

Go to the Alignment tab of the Format Cells dialog box. Shrink to fit is directly below Wrap text. Enabling Shrink to fit will automatically reduce the font size in a cell so that the text fits without wrapping.


2 Answers

This question might help you out but I warn you though this solves it through jQuery:

Auto-size dynamic text to fill fixed size container

Good luck.

The OP of that question made a plugin, here is the link to it (& download)

BTW I'm suggesting jQuery because as Gaby pointed out this can't be done though CSS only and you said you were willing to use js...

like image 113
Trufa Avatar answered Oct 23 '22 16:10

Trufa


Can't be done with CSS.

100% is in relation to the computed font-size of the parent element.

reference: http://www.w3.org/TR/CSS2/fonts.html#font-size-props

For a jQuery solution look at Auto-size dynamic text to fill fixed size container

like image 29
Gabriele Petrioli Avatar answered Oct 23 '22 17:10

Gabriele Petrioli