javascript - Have font size change according to size of div - Stack Overflow

admin管理员组

文章数量:1296855

I have a resisable div with text inside. I want the text to scale as the div changes size.

Specifically, I want the text to have the largest possible font size that will make it fit inside the div.

I have a resisable div with text inside. I want the text to scale as the div changes size.

Specifically, I want the text to have the largest possible font size that will make it fit inside the div.

• javascript
• html
• css

Share Improve this question Follow asked Oct 26, 2011 at 8:51 RandomblueRandomblue 116k150150 gold badges362362 silver badges557557 bronze badges 2

• possible duplicate of Javascript that automatically sets font-size on element so that text doesn't overflow? (autofit) – Quentin Commented Oct 26, 2011 at 8:53
• This is a duplicate question here stackoverflow./questions/3840452/… – coder Commented Oct 26, 2011 at 8:55

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Use FitText http://fittextjs./

I use this plugin that I made based on fitText.js, because fitText doesn't fit my needs, due to I don't know the length of the strings to resize, so the fix resize parameter of fitText don't work in all cases.

$.fn.adjustTextSize = function (set_max_size, min_size) {
    min_size = min_size || 12; // if no value then set a default one
    var string, width, line, initFontSize, returnFontSize, ratio;

    return this.each(function() {
        // Store the object
        var $this = $(this);

        var resizer = function () {
            string = $this;
            string.html('<span style="white-space: nowrap;">' + string.html() + '</span>');

            width = string.width();
            line = $(string.children('span'));
            initFontSize = parseInt(string.css('font-size'));
            ratio = width/line.width();

            returnFontSize = initFontSize*ratio;

            if (set_max_size && returnFontSize > initFontSize) {
                returnFontSize = initFontSize;
            }

            if (min_size && returnFontSize < min_size) {
                returnFontSize = min_size;
            }

            string.css('font-size',returnFontSize);
            while (line.width() >= width) {
                if (min_size && returnFontSize <= min_size) {
                    string.html(line.html());
                    return false;
                }
                string.css('font-size', --returnFontSize);
            }
            string.html(line.html());
        }

        // Call once to set.
        resizer();

        // Call on resize. Opera debounces their resize by default.
        $(window).on('resize orientationchange', resizer);
    });
};
$('.js-adjust-text').adjustTextSize(false, 12);
$('.js-adjust-text-limit').adjustTextSize(true, 30);

This plugin get two parameters:

• set_max_size: boolean to limit maximum font size to its defined size in CSS
• min_size: Integer number to limit minimum font size.

I hope it works for your case.

You can try like this:

If you want the height to adjust, try setting the height to auto

$("#sample").modal({
 containerCss:{
  backgroundColor:"#fff",
  borderColor:"#0063dc",
  height:450,
  padding:0,
  width:830
 }
});

here is a little changed code above, because it is for getting width of container I made edit for heigh container adjustment.

$.fn.adjustTextSize = function (set_max_size, min_size) {

    min_size = min_size || 12; // if no value then set a default one
    var string, height, line, initFontSize, returnFontSize, ratio;

    return this.each(function() {
        // Store the object
        var $this = $(this);

        var resizer = function () {
            string = $this;
            string.html('<span>' + string.html() + '</span>');

            height = string.height();
            line = $(string.children('span'));
            initFontSize = parseInt(string.css('font-size'));
            ratio = height/line.height();

            returnFontSize = (initFontSize*ratio) ;

            if (set_max_size && returnFontSize > initFontSize) {
                returnFontSize = initFontSize;
            }

            if (min_size && returnFontSize < min_size) {
                returnFontSize = min_size;
            }

            string.css('font-size',returnFontSize);
            while (line.height() >= height) {
                if (min_size && returnFontSize <= min_size) {
                    string.html(line.html());
                    return false;
                }
                string.css('font-size', --returnFontSize);
            }
            string.html(line.html());
        }

        // Call once to set.
        resizer();

        // Call on resize. Opera debounces their resize by default.
        $(window).on('resize orientationchange', resizer);
    });
};

Hope it will useful

本文标签： javascriptHave font size change according to size of divStack Overflow