html中咋样将一行字体变大,调整字体大小以适合div（在一行上）

精慕HU

以下是我经常使用的3个函数来获取文本宽度，高度并将大小调整为容器的宽度。getTextWidth()将返回启动器中包含的文本的实际宽度。getTextHeight(width)将返回包含在启动器中的包装文本的实际高度，并具有指定的指定宽度。考虑到最小和最大尺寸，autoTextSize(minSize，maxSize，truncate)将调整容器内的文本大小以使其适合。autoTruncateText()仅显示用户可以实际看到的字符，并以“...”结束文本。(function ($) {  $.fn.getTextWidth = function() {    var spanText = $("BODY #spanCalculateTextWidth");    if (spanText.size() <= 0) {      spanText = $("");      spanText.appendTo("BODY");    }    var valu = this.val();    if (!valu) valu = this.text();    spanText.text(valu);    spanText.css({      "fontSize": this.css('fontSize'),      "fontWeight": this.css('fontWeight'),      "fontFamily": this.css('fontFamily'),      "position": "absolute",      "top": 0,      "opacity": 0,      "left": -2000    });    return spanText.outerWidth() + parseInt(this.css('paddingLeft')) + 'px';  };  $.fn.getTextHeight = function(width) {    var spanText = $("BODY #spanCalculateTextHeight");    if (spanText.size() <= 0) {      spanText = $("");      spanText.appendTo("BODY");    }    var valu = this.val();    if (!valu) valu = this.text();    spanText.text(valu);    spanText.css({      "fontSize": this.css('fontSize'),      "fontWeight": this.css('fontWeight'),      "fontFamily": this.css('fontFamily'),      "top": 0,      "left": -1 * parseInt(width) + 'px',      "position": 'absolute',      "display": "inline-block",      "width": width    });    return spanText.innerHeight() + 'px';  };  /**   * Adjust the font-size of the text so it fits the container.   *   * @param minSize     Minimum font size?   * @param maxSize     Maximum font size?   * @param truncate    Truncate text after sizing to make sure it fits?   */  $.fn.autoTextSize = function(minSize, maxSize, truncate) {    var _self = this,        _width = _self.innerWidth(),        _textWidth = parseInt(_self.getTextWidth()),        _fontSize = parseInt(_self.css('font-size'));    while (_width < _textWidth || (maxSize && _fontSize > parseInt(maxSize))) {      if (minSize && _fontSize <= parseInt(minSize)) break;      _fontSize--;      _self.css('font-size', _fontSize + 'px');      _textWidth = parseInt(_self.getTextWidth());    }    if (truncate) _self.autoTruncateText();  };  /**   * Function that truncates the text inside a container according to the   * width and height of that container. In other words, makes it fit by chopping   * off characters and adding '...'.   */  $.fn.autoTruncateText = function() {    var _self = this,        _width = _self.outerWidth(),        _textHeight = parseInt(_self.getTextHeight(_width)),        _text = _self.text();    // As long as the height of the text is higher than that    // of the container, we'll keep removing a character.    while (_textHeight > _self.outerHeight()) {      _text = _text.slice(0,-1);      _self.text(_text);      _textHeight = parseInt(_self.getTextHeight(_width));      _truncated = true;    }    // When we actually truncated the text, we'll remove the last    // 3 characters and replace it with '...'.    if (!_truncated) return;    _text = _text.slice(0, -3);    // Make sure there is no dot or space right in front of '...'.    var lastChar = _text[_text.length - 1];    if (lastChar == ' ' || lastChar == '.') _text = _text.slice(0, -1);    _self.text(_text + '...');  };})(jQuery);