调整字体大小以适合div（在一行中）
问过类似的问题，但解决方案确实与我想要做的事情相吻合。 基本上，我有一篇文章标题（ <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属性，我可以设置更好，但我似乎无法找到一个（溢出不会在这种情况下工作）。
CSS不，Javascript是的
你无法使用CSS来做到这一点，但你可以在javascript / jQuery中做到这一点。 为了帮助你解决你的伪代码，因为你已经知道该怎么做。 只是你不知道如何检测多余的宽度。
最好的方法是创建一个具有以下（至少）风格的DIV：
position: absolute;
visibility: hidden;
whitespace: nowrap;
font-family: /* same as your title's */
然后复制您的文本并设置一些开始字体大小。 然后，您可以遍历while循环，并在div宽度合适时停止。 然后将计算字体大小设置为原始标题。
这样，这种检查将被用户的眼睛隐藏起来，因此它的工作速度也会更快。
顺便说一句 ：这是自动生长textarea脚本如何工作的常用方式。 他们使用与原始文本区域具有相同样式设置的虚拟div，并在用户输入文本时调整区域的高度。 因此，文本区域起初可能非常小，但如果用户输入大量文本，它会自动增长以容纳内容。
while循环优化
你可以通过这样做来优化你的while循环来显着减少迭代次数：
我有一个类似的问题，这使我为此写了自己的插件。 看看jquery-quickfit（与Robert Koritnik的解决方案非常相似，我非常喜欢它）。
为了防止标题跨越多行，只需添加一个css样式：
white-space:nowrap;
到元素。
在标题中包含jquery和quickfit之后。 您可以通过以下方式触发quickfit：
$('h1').quickfit();
它为文本的每个字母测量和计算尺寸不变的尺寸，并用它来计算适合文本到容器中的下一个最佳字体尺寸。
计算被缓存，这使得它在处理不得不适应多个文本或不得不适应文本多次时非常快速，例如，在窗口调整大小（在调整大小时几乎没有性能损失）。
演示与您类似的情况
更多文档，示例和源代码都在项目页面上。
以下是我经常使用的3个函数来获取文本的宽度，高度，并根据容器的宽度调整大小。
(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);