根据div的大小改变字体大小

Question

我有一个带有文字的电阻div 。 我希望文本随着div改变大小而缩放。

具体来说，我希望文本具有最大可能的字体大小，使其适合div 。

Answer 1

使用FitText http://fittextjs.com/

Answer 2

我使用这个基于fitText.js制作的插件 ，因为fitText不适合我的需要，因为我不知道要调整大小的字符串的长度，所以fitText的fix resize参数不适用于所有案例。

$.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);

这个插件有两个参数：

• set_max_size：boolean将最大字体大小限制为CSS中定义的大小
• min_size：限制最小字体大小的整数。

我希望它适合你的情况。

Answer 3

这里是一个稍微改变的代码，因为它是为了获得容器的宽度我为高容器调整进行了编辑。

$.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);
    });
};

希望它会有用

Answer 4

你可以尝试这样：

如果要调整高度，请尝试将高度设置为自动

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