调整字体大小以适合div（在一行上）

Question

已经提出了类似的问题，但解决方案确实与我想要做的事情相吻合。基本上，我有一篇标题（<h1>）的文章。我不想控制标题的长度，但我也不希望标题出现在多行上。有没有办法用css或jQuery根据<div>标签的宽度调整文本大小？我知道如果我能检测到文本与边缘的重叠，我会用伪代码做什么<div>：var fontize = $("#title").css("font-size");var i = /*remove unit from integer*/while( /*text overlaps div*/ ){    $("#title").css("font-size", --i+"pt");}如果有一个CSS属性我可以设置更好，但我似乎找不到一个（溢出在这种情况下不起作用）。

Answer 1

CSS不，Javascript是的

使用CSS无法做到这一点，但你可以在javascript / jQuery中完成。为了帮助您使用伪代码，因为您已经知道该怎么做。只是你不知道如何检测多余的宽度。

最好的方法是让DIV具有以下（至少）风格：

position: absolute;

visibility: hidden;

white-space: nowrap;

font-family: /* same as your title's */

然后将文本复制到它并设置一些起始字体大小。然后你可以迭代你的while循环并在div的宽度合适时停止。然后将计算的字体大小设置为原始标题。

这样，这种检查将隐藏在用户的眼睛之外，因此它也将更快地工作。

顺便说一句：这是自动增长textarea脚本工作的常用方式。他们使用与原始文本区域具有相同样式设置的虚拟div，并在用户键入文本时调整区域的高度。因此，文本区域最初可能非常小，但如果用户输入大量文本，它将自动增长以容纳内容。

循环优化

您可以通过执行以下操作优化while循环以显着减少迭代次数：

设置起始字体大小。

得到测试DIV的宽度。

计算orig_div和test_div之间的宽度系数。

通过此因子调整字体大小，而不是增加/减少一个单位

测试test_div宽度

Answer 2

我有一个类似的问题，这让我为此编写了自己的插件。看看jquery-quickfit（这与Robert Koritnik的解决方案非常相似，我非常喜欢）。

为了防止标题跨越多行，只需添加一个css样式：

white-space:nowrap;

对元素。

在标题中包含jquery和quickfit之后。您可以使用以下命令触发快速配

$('h1').quickfit();

它测量并计算文本的每个字母的大小不变量，以适合并使用它来计算适合文本到容器中的下一个最佳字体大小。

计算被缓存，这使得它在处理必须适合多个文本或必须多次适合文本时非常快，例如，在窗口调整大小时（调整大小几乎没有性能损失）。

演示与您类似的情况

项目页面上有更多文档，示例和源代码。

Answer 3

以下是我经常使用的3个函数来获取文本宽度，高度并将大小调整为容器的宽度。

getTextWidth（）将返回启动器中包含的文本的实际宽度。

getTextHeight（width）将返回包含在启动器中的包装文本的实际高度，并具有指定的指定宽度。

考虑到最小和最大尺寸，autoTextSize（minSize，maxSize，truncate）将调整容器内的文本大小以使其适合。

autoTruncateText（）仅显示用户可以实际看到的字符，并以“...”结束文本。

(function ($) {

  $.fn.getTextWidth = function() {

    var spanText = $("BODY #spanCalculateTextWidth");

    if (spanText.size() <= 0) {

      spanText = $("<span id='spanCalculateTextWidth' style='filter: alpha(0);'></span>");

      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 = $("<span id='spanCalculateTextHeight'></span>");

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