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)
Syntax: font-size-adjust: number|none|initial|inherit; Below are the examples that illustrates the use of font-size-adjust property.
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.
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.
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.
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...
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With