Is it possible to adapt font size to div width?

[XaviJr]

I have some div with 250px width and 500px height and here’s what i want to do:
– put some words in that div with br’s next to it
– adapt font size so that those words occupy all div width (bigger words with small font size and vice versa)

Is this possible with only css? If not, is it possible with anything?! :p

Thanks in advance!

[Johnnyb]

Hey, this isn’t going to be achievable with CSS alone, but you could certainly do this using jquery/javascript. For example you could enclose each word in a span, measure the width of that span, divide the width of the parent div by the span width, then multiply the font-size of the span text by that number.

i.e: (div width/span width) * span font-size

[XaviJr]

well, i’m not an expert with javascript but i will try archieve your sugestion. thank you!

[Johnnyb]

I was kind of interested to test it out so I threw it together for you real quick:

http://jbdes.net/dev/js/fontsize.html

Let me know if that works as you wanted!

[joomlawebdesigner]

Hi,
set your html and body to height:100% on both
then make your container div height:auto and min-height:100%

#container

{

height:auto;

min-height:100%;

}.



selector {

min-height:500px;

height:auto !important;

height:500px;

}

[XaviJr]

Thanks guys! Johnnyb, i didn’t have yet time to test your solution, but it appears to be what i want. I’ve saved your page so i will put my feedback here when test it.

[Johnnyb]

Hey no problem, let me know if you need anymore help!

John

[mmoubarak]

Johnyb..I see your method works on words only (no spaces in between). Is there a way i can apply the resizing to a sentence and not just a word?
For example your first sentence “fits the width of the parent” would be adjusted to fit on a single line.

Thanks

[kunibert]

Thanks Johnnyb for that snippet. Thought I share a tiny deviation for the following scenario:

Want text to scale div stretching entire browser window. Want 250 px margin for picture.

note: had to use $(window).load … otherwise the resize did not happen (guess a sequence problem) *shrugs*

[jeremyhawes]

Thanks @johnnyb
That jQuery script helped fix my problem too.
cheers

[TheDoc]

http://fittextjs.com/

[Kitty Giraudel]

Am I the only one thinking about vw and vh?

[Paulie_D]

As far as I know (after googling vw & vh)…with vw/vh, we can only size elements to be relative to the size of the viewport and not the containing element.

Or am I misreading?

[Kitty Giraudel]

I misunderstood the problem I guess. Indeed, vw and vh are relative to the viewport dimensions, and not the parent dimensions. Then it won’t help much.

If someone needs an example: http://jsfiddle.net/jWUU7/.

[JoniGiuro]

If find this topic is interesting so I decided to give it a shot, but I’m having some trouble. Anyone wanting to check my code and see if you can figure out what’s wrong?

testpage: http://zhereicome.com/experiments/statics/title-justify/

code:

function resizeFont(elemToR){
parentW = elemToR.width();
elemToR.find(‘.row’).each(function(n){
curRow = $(this);
curWidth = curRow.width();
console.log(curWidth)
console.log(parentW)
var ratio = parentW / curWidth;
console.log(ratio)
$(this).css(‘font-size’, ratio * initialSize + ‘px’);
});
}

$(window).load(function(){
initialSize = 10;
$(‘.justify-this’).each(function(){
resizeFont($(this));
})
})

$(window).resize(function(){
$(‘.justify-this’).each(function(){
resizeFont($(this))
})

})

thanks!

[Author]

Posts