- This topic is empty.
February 17, 2011 at 1:26 pm #31671
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!February 17, 2011 at 5:20 pm #59674
i.e: (div width/span width) * span font-sizeFebruary 18, 2011 at 5:49 am #59516
I was kind of interested to test it out so I threw it together for you real quick:
Let me know if that works as you wanted!February 18, 2011 at 3:37 pm #59472joomlawebdesignerMember
set your html and body to height:100% on both
then make your container div height:auto and min-height:100%
}March 21, 2011 at 8:20 am #54981
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.March 21, 2011 at 2:38 pm #54855
Hey no problem, let me know if you need anymore help!
JohnApril 9, 2011 at 8:27 am #51695mmoubarakMember
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.
ThanksAugust 29, 2011 at 12:23 pm #85915kunibertMember
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*July 12, 2012 at 7:20 pm #106001July 12, 2012 at 7:26 pm #106003October 17, 2012 at 6:20 am #112056Kitty GiraudelParticipant
Am I the only one thinking about
vh?October 17, 2012 at 6:31 am #112058Paulie_DMember
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?October 17, 2012 at 7:34 am #112061Kitty GiraudelParticipant
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/.October 17, 2012 at 8:05 am #112067JoniGiuroParticipant
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?
parentW = elemToR.width();
curRow = $(this);
curWidth = curRow.width();
var ratio = parentW / curWidth;
$(this).css(‘font-size’, ratio * initialSize + ‘px’);
initialSize = 10;