调整字体大小以适合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 ($) {&nbsp; $.fn.getTextWidth = function() {&nbsp; &nbsp; var spanText = $("BODY #spanCalculateTextWidth");&nbsp; &nbsp; if (spanText.size() <= 0) {&nbsp; &nbsp; &nbsp; spanText = $("<span id='spanCalculateTextWidth' style='filter: alpha(0);'></span>");&nbsp; &nbsp; &nbsp; spanText.appendTo("BODY");&nbsp; &nbsp; }&nbsp; &nbsp; var valu = this.val();&nbsp; &nbsp; if (!valu) valu = this.text();&nbsp; &nbsp; spanText.text(valu);&nbsp; &nbsp; spanText.css({&nbsp; &nbsp; &nbsp; "fontSize": this.css('fontSize'),&nbsp; &nbsp; &nbsp; "fontWeight": this.css('fontWeight'),&nbsp; &nbsp; &nbsp; "fontFamily": this.css('fontFamily'),&nbsp; &nbsp; &nbsp; "position": "absolute",&nbsp; &nbsp; &nbsp; "top": 0,&nbsp; &nbsp; &nbsp; "opacity": 0,&nbsp; &nbsp; &nbsp; "left": -2000&nbsp; &nbsp; });&nbsp; &nbsp; return spanText.outerWidth() + parseInt(this.css('paddingLeft')) + 'px';&nbsp; };&nbsp; $.fn.getTextHeight = function(width) {&nbsp; &nbsp; var spanText = $("BODY #spanCalculateTextHeight");&nbsp; &nbsp; if (spanText.size() <= 0) {&nbsp; &nbsp; &nbsp; spanText = $("<span id='spanCalculateTextHeight'></span>");&nbsp; &nbsp; &nbsp; spanText.appendTo("BODY");&nbsp; &nbsp; }&nbsp; &nbsp; var valu = this.val();&nbsp; &nbsp; if (!valu) valu = this.text();&nbsp; &nbsp; spanText.text(valu);&nbsp; &nbsp; spanText.css({&nbsp; &nbsp; &nbsp; "fontSize": this.css('fontSize'),&nbsp; &nbsp; &nbsp; "fontWeight": this.css('fontWeight'),&nbsp; &nbsp; &nbsp; "fontFamily": this.css('fontFamily'),&nbsp; &nbsp; &nbsp; "top": 0,&nbsp; &nbsp; &nbsp; "left": -1 * parseInt(width) + 'px',&nbsp; &nbsp; &nbsp; "position": 'absolute',&nbsp; &nbsp; &nbsp; "display": "inline-block",&nbsp; &nbsp; &nbsp; "width": width&nbsp; &nbsp; });&nbsp; &nbsp; return spanText.innerHeight() + 'px';&nbsp; };&nbsp; /**&nbsp; &nbsp;* Adjust the font-size of the text so it fits the container.&nbsp; &nbsp;*&nbsp; &nbsp;* @param minSize&nbsp; &nbsp; &nbsp;Minimum font size?&nbsp; &nbsp;* @param maxSize&nbsp; &nbsp; &nbsp;Maximum font size?&nbsp; &nbsp;* @param truncate&nbsp; &nbsp; Truncate text after sizing to make sure it fits?&nbsp; &nbsp;*/&nbsp; $.fn.autoTextSize = function(minSize, maxSize, truncate) {&nbsp; &nbsp; var _self = this,&nbsp; &nbsp; &nbsp; &nbsp; _width = _self.innerWidth(),&nbsp; &nbsp; &nbsp; &nbsp; _textWidth = parseInt(_self.getTextWidth()),&nbsp; &nbsp; &nbsp; &nbsp; _fontSize = parseInt(_self.css('font-size'));&nbsp; &nbsp; while (_width < _textWidth || (maxSize && _fontSize > parseInt(maxSize))) {&nbsp; &nbsp; &nbsp; if (minSize && _fontSize <= parseInt(minSize)) break;&nbsp; &nbsp; &nbsp; _fontSize--;&nbsp; &nbsp; &nbsp; _self.css('font-size', _fontSize + 'px');&nbsp; &nbsp; &nbsp; _textWidth = parseInt(_self.getTextWidth());&nbsp; &nbsp; }&nbsp; &nbsp; if (truncate) _self.autoTruncateText();&nbsp; };&nbsp; /**&nbsp; &nbsp;* Function that truncates the text inside a container according to the&nbsp; &nbsp;* width and height of that container. In other words, makes it fit by chopping&nbsp; &nbsp;* off characters and adding '...'.&nbsp; &nbsp;*/&nbsp; $.fn.autoTruncateText = function() {&nbsp; &nbsp; var _self = this,&nbsp; &nbsp; &nbsp; &nbsp; _width = _self.outerWidth(),&nbsp; &nbsp; &nbsp; &nbsp; _textHeight = parseInt(_self.getTextHeight(_width)),&nbsp; &nbsp; &nbsp; &nbsp; _text = _self.text();&nbsp; &nbsp; // As long as the height of the text is higher than that&nbsp; &nbsp; // of the container, we'll keep removing a character.&nbsp; &nbsp; while (_textHeight > _self.outerHeight()) {&nbsp; &nbsp; &nbsp; _text = _text.slice(0,-1);&nbsp; &nbsp; &nbsp; _self.text(_text);&nbsp; &nbsp; &nbsp; _textHeight = parseInt(_self.getTextHeight(_width));&nbsp; &nbsp; &nbsp; _truncated = true;&nbsp; &nbsp; }&nbsp; &nbsp; // When we actually truncated the text, we'll remove the last&nbsp; &nbsp; // 3 characters and replace it with '...'.&nbsp; &nbsp; if (!_truncated) return;&nbsp; &nbsp; _text = _text.slice(0, -3);&nbsp; &nbsp; // Make sure there is no dot or space right in front of '...'.&nbsp; &nbsp; var lastChar = _text[_text.length - 1];&nbsp; &nbsp; if (lastChar == ' ' || lastChar == '.') _text = _text.slice(0, -1);&nbsp; &nbsp; _self.text(_text + '...');&nbsp; };})(jQuery);