javascript - Dynamically Resize Text Based on Container Width - Stack Overflow

admin管理员组

文章数量:1334937

I'm working on a responsive design and I have some display <h3> tags that I would like to scale down when the width of the browser window is reduced.

The initial setup, based on a width of 960px:

1. The body font-size is set to 14px
2. The font-size of the h3 tag is 40px
3. The width of the containing div is 230px

So here's what I worked out for the javascript/jQuery:

$(window).resize(function(){
    var containerSize = $('.container').width();
    var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */
    var textRatio = containerSize * textPercentage;
    var textEms = textRatio / 14;

    $('.container h3').css(fontSize,textEms+"em");
});

My javscript skills are obviously quite limited, so I was hoping you could help me get this all purdy and working right. I think the $(window).resize function is the wrong event to use, since the text should resize automatically on page load, not just on window resize.

Thanks in advance for the help!

Note: I don't want the text to stretch to the edges of the containers, which is why I'm not using FitText.js or BigText.js.

I'm working on a responsive design and I have some display <h3> tags that I would like to scale down when the width of the browser window is reduced.

The initial setup, based on a width of 960px:

1. The body font-size is set to 14px
2. The font-size of the h3 tag is 40px
3. The width of the containing div is 230px

So here's what I worked out for the javascript/jQuery:

$(window).resize(function(){
    var containerSize = $('.container').width();
    var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */
    var textRatio = containerSize * textPercentage;
    var textEms = textRatio / 14;

    $('.container h3').css(fontSize,textEms+"em");
});

My javscript skills are obviously quite limited, so I was hoping you could help me get this all purdy and working right. I think the $(window).resize function is the wrong event to use, since the text should resize automatically on page load, not just on window resize.

Thanks in advance for the help!

Note: I don't want the text to stretch to the edges of the containers, which is why I'm not using FitText.js or BigText.js.

• javascript
• jquery
• font-size
• responsive-design

Share Improve this question Follow asked Feb 9, 2012 at 20:16 pixelcookpixelcook 4744 silver badges99 bronze badges 6

• 1 You should be able to use css media queries for this, no need to use js – elclanrs Commented Feb 9, 2012 at 20:18
• @Jasper and ShankarSangoli both gave answers, but I would add a note that you might want to consider throttling how often the resize event handler is executed. Refer to benalman./projects/jquery-throttle-debounce-plugin or documentcloud.github./underscore/#throttle – jessegavin Commented Feb 9, 2012 at 21:05
• @elclanrs Media Queries only allow me to resize text based on a specific window width. I want my text to automatically resize in response to the width of the container. – pixelcook Commented Feb 10, 2012 at 18:17
• @jessegavin Can you explain what that plugin does exactly? I assume it has something to do with keeping the script from running continuously, but I don't understand the technical jargon. Thanks! – pixelcook Commented Feb 10, 2012 at 18:32
• @pixelcook the article does a much better job than I would at explaining it. – jessegavin Commented Feb 10, 2012 at 19:14

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

window.resize is the correct event but it doesn't fire on page-load. You can however just add .trigger('resize') to your code to make it fire on page-load:

$(window).bind('resize', function(){
    var containerSize  = $('.container').width(),
        textPercentage = 0.17391304347826086956521739130435, /* 40/230 */
        textRatio      = containerSize * textPercentage,
        textEms        = textRatio / 14;

    $('.container h3').css(fontSize, textEms+"em");
}).trigger('resize');

You are going to want to run this code after document.ready to make sure the width you are getting for the container is correct. You could also place this code at the bottom of your HTML document (which you should do with or without the document.ready event handler) which will make sure the elements are available when you run this code:

//wait for `document.ready` to fire
$(function () {

    //cache the .container and H3 elements
    var $container = $('.container'),
        $h3        = $container.find('h3');

    //bind event handler to `window.resize`
    $(window).bind('resize', function(){

        //get the width of the container
        var containerSize  = $container.width(),
            textPercentage = 0.17391304347826086956521739130435, /* 40/230 */
            textRatio      = containerSize * textPercentage,
            textEms        = textRatio / 14;

        $h3.css('fontSize', textEms+"em");
    }).trigger('resize');
});

Notice that I cached the H3 element(s) so it/then don't have to be selected every resize event, because when you actually re-size your browser there are tons of these events that fire.

You could try this.

$(window).resize(function(){
    var containerSize = $('.container').width();
    var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */
    var textRatio = containerSize * textPercentage;
    var textEms = textRatio / 14;

    //fontSize should be enclosed in quotes
    $('.container h3').css('fontSize', textEms+"em");
})
.resize();//Triggers the resize on page load to set the font size

For people who find this by googling something like 'responsive font size', this might be of help:

https://github./davatron5000/FitText.js

It is a jQuery plugin that sets a font-size based on it's container's width. It also has some options to get the desired results.

PS: Of course it also scales your text when the window gets resized.

本文标签： javascriptDynamically Resize Text Based on Container WidthStack Overflow