为了账号安全,请及时绑定邮箱和手机立即绑定

调整字体大小以适合div(在一行上)

调整字体大小以适合div(在一行上)

倚天杖 2019-09-20 16:27:31
已经提出了类似的问题,但解决方案确实与我想要做的事情相吻合。基本上,我有一篇标题(<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属性我可以设置更好,但我似乎找不到一个(溢出在这种情况下不起作用)。
查看完整描述

3 回答

?
牧羊人nacy

TA贡献1862条经验 获得超7个赞


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宽度


查看完整回答
反对 回复 2019-09-20
?
慕姐8265434

TA贡献1813条经验 获得超2个赞

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


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


white-space:nowrap;

对元素。


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


$('h1').quickfit();

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


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


演示与您类似的情况


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


查看完整回答
反对 回复 2019-09-20
?
精慕HU

TA贡献1845条经验 获得超8个赞

以下是我经常使用的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);


查看完整回答
反对 回复 2019-09-20
  • 3 回答
  • 0 关注
  • 1050 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信