Grow your CSS skills. Land your dream job.

Is it possible to adapt font size to div width?

  • # February 17, 2011 at 1:26 pm

    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

    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

    # February 18, 2011 at 5:49 am

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

    # February 18, 2011 at 1:03 pm

    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!

    # February 18, 2011 at 3:37 pm

    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;
    }
    # March 21, 2011 at 8:20 am

    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

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

    John

    # April 9, 2011 at 8:27 am

    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

    # August 29, 2011 at 12:23 pm

    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

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

    # July 12, 2012 at 7:26 pm

    http://fittextjs.com/

    # October 17, 2012 at 6:20 am

    Am I the only one thinking about vw and vh?

    # October 17, 2012 at 6:31 am

    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

    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

    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!

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".