我需要将用户输入的文本显示为固定大小的div。我想要的是自动调整字体大小，以便文本尽可能填充框。
所以 - 如果div是400px x 300px。如果有人输入ABC，那么它真的很大。如果他们输入一个段落，那么它将是一个很小的字体。
我可能想要从最大字体大小开始 - 可能是32px，虽然文本太大而不适合容器，但缩小字体大小直到它适合。
答案 0 :(得分：162)
谢谢Attack。我想使用jQuery。
你指出了我正确的方向，这就是我最终的目标：
以下是该插件的链接：https://plugins.jquery.com/textfill/
以及指向来源的链接：http://jquery-textfill.github.io/
;(function($) {
$.fn.textfill = function(options) {
var fontSize = options.maxFontPixels;
var ourText = $('span:visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
return this;
}
})(jQuery);
$(document).ready(function() {
$('.jtextfill').textfill({ maxFontPixels: 36 });
});
我的html就像这样
<div class='jtextfill' style='width:100px;height:50px;'>
<span>My Text Here</span>
</div>
这是我的第一个jquery插件，所以它可能没那么好。指针当然是受欢迎的。
答案 1 :(得分：52)
由于性能不佳，我没有发现任何以前的解决方案足够，所以我自己创建了使用简单的数学而不是循环。在所有浏览器中也应该可以正常工作。
根据this performance test case，它比这里找到的其他解决方案快得多。
(function($) {
$.fn.textfill = function(maxFontSize) {
maxFontSize = parseInt(maxFontSize, 10);
return this.each(function(){
var ourText = $("span", this),
parent = ourText.parent(),
maxHeight = parent.height(),
maxWidth = parent.width(),
fontSize = parseInt(ourText.css("fontSize"), 10),
multiplier = maxWidth/ourText.width(),
newSize = (fontSize*(multiplier-0.1));
ourText.css(
"fontSize",
(maxFontSize > 0 && newSize > maxFontSize) ?
maxFontSize :
newSize
);
});
};
})(jQuery);
如果你想贡献我已添加this to Gist。
答案 2 :(得分：33)
尽管我喜欢这个答案偶尔的赞成（谢谢！），但这并不是解决这个问题的最佳方法。请在这里查看一些其他精彩的答案，特别是那些找到解决方案而没有循环的答案。
尽管如此，为了参考，这是我的原始答案：
<html>
<head>
<style type="text/css">
#dynamicDiv
{
background: #CCCCCC;
width: 300px;
height: 100px;
font-size: 64px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function shrink()
{
var textSpan = document.getElementById("dynamicSpan");
var textDiv = document.getElementById("dynamicDiv");
textSpan.style.fontSize = 64;
while(textSpan.offsetHeight > textDiv.offsetHeight)
{
textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
}
}
</script>
</head>
<body onload="shrink()">
<div id="dynamicDiv"><span id="dynamicSpan">DYNAMIC FONT</span></div>
</body>
</html>
这是一个类的版本：
<html>
<head>
<style type="text/css">
.dynamicDiv
{
background: #CCCCCC;
width: 300px;
height: 100px;
font-size: 64px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function shrink()
{
var textDivs = document.getElementsByClassName("dynamicDiv");
var textDivsLength = textDivs.length;
// Loop through all of the dynamic divs on the page
for(var i=0; i<textDivsLength; i++) {
var textDiv = textDivs[i];
// Loop through all of the dynamic spans within the div
var textSpan = textDiv.getElementsByClassName("dynamicSpan")[0];
// Use the same looping logic as before
textSpan.style.fontSize = 64;
while(textSpan.offsetHeight > textDiv.offsetHeight)
{
textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
}
}
}
</script>
</head>
<body onload="shrink()">
<div class="dynamicDiv"><span class="dynamicSpan">DYNAMIC FONT</span></div>
<div class="dynamicDiv"><span class="dynamicSpan">ANOTHER DYNAMIC FONT</span></div>
<div class="dynamicDiv"><span class="dynamicSpan">AND YET ANOTHER DYNAMIC FONT</span></div>
</body>
</html>
答案 3 :(得分：32)
大多数其他答案都使用循环来缩小字体大小，直到它适合div为止，这非常慢，因为每次字体更改大小时页面都需要重新渲染元素。我最终不得不编写自己的算法，使其以允许我定期更新其内容而不冻结用户浏览器的方式执行。我添加了一些其他功能（旋转文本，添加填充）并将其打包为jQuery插件，您可以在以下位置获取：
https://github.com/DanielHoffmann/jquery-bigtext
只需致电
$("#text").bigText();
它很适合你的容器。
请在此处查看：
http://danielhoffmann.github.io/jquery-bigtext/
目前它有一些限制，div必须具有固定的高度和宽度，并且不支持将文本包装成多行。
我将努力获得一个设置最大字体大小的选项。
编辑：我发现插件存在一些问题，除了标准版之外，它不处理其他框模型，而div不能有边距或边框。我会继续努力。
Edit2：我现在已经修复了这些问题和限制并添加了更多选项。您可以设置最大字体大小，也可以选择使用宽度，高度或两者来限制字体大小。我将努力接受包装器元素中的max-width和max-height值。
Edit3：我已将插件更新到1.2.0版。代码和新选项（verticalAlign，horizontalAlign，textAlign）的主要清理以及对span标记内部元素的支持（如换行符或字体很棒的图标。）
答案 4 :(得分：9)
这是基于GeekyMonkey上面发布的内容，并进行了一些修改。
; (function($) {
/**
* Resize inner element to fit the outer element
* @author Some modifications by Sandstrom
* @author Code based on earlier works by Russ Painter (WebDesign@GeekyMonkey.com)
* @version 0.2
*/
$.fn.textfill = function(options) {
options = jQuery.extend({
maxFontSize: null,
minFontSize: 8,
step: 1
}, options);
return this.each(function() {
var innerElements = $(this).children(':visible'),
fontSize = options.maxFontSize || innerElements.css("font-size"), // use current font-size by default
maxHeight = $(this).height(),
maxWidth = $(this).width(),
innerHeight,
innerWidth;
do {
innerElements.css('font-size', fontSize);
// use the combined height of all children, eg. multiple <p> elements.
innerHeight = $.map(innerElements, function(e) {
return $(e).outerHeight();
}).reduce(function(p, c) {
return p + c;
}, 0);
innerWidth = innerElements.outerWidth(); // assumes that all inner elements have the same width
fontSize = fontSize - options.step;
} while ((innerHeight > maxHeight || innerWidth > maxWidth) && fontSize > options.minFontSize);
});
};
})(jQuery);
答案 5 :(得分：6)
我为AngularJS创建了一个指令 - 受到GeekyMonkey答案的启发，但没有jQuery依赖。
演示： http://plnkr.co/edit/8tPCZIjvO3VSApSeTtYr?p=preview
<强>标记
<div class="fittext" max-font-size="50" text="Your text goes here..."></div>
<强>指令
app.directive('fittext', function() {
return {
scope: {
minFontSize: '@',
maxFontSize: '@',
text: '='
},
restrict: 'C',
transclude: true,
template: '<div ng-transclude class="textContainer" ng-bind="text"></div>',
controller: function($scope, $element, $attrs) {
var fontSize = $scope.maxFontSize || 50;
var minFontSize = $scope.minFontSize || 8;
// text container
var textContainer = $element[0].querySelector('.textContainer');
angular.element(textContainer).css('word-wrap', 'break-word');
// max dimensions for text container
var maxHeight = $element[0].offsetHeight;
var maxWidth = $element[0].offsetWidth;
var textContainerHeight;
var textContainerWidth;
var resizeText = function(){
do {
// set new font size and determine resulting dimensions
textContainer.style.fontSize = fontSize + 'px';
textContainerHeight = textContainer.offsetHeight;
textContainerWidth = textContainer.offsetWidth;
// shrink font size
var ratioHeight = Math.floor(textContainerHeight / maxHeight);
var ratioWidth = Math.floor(textContainerWidth / maxWidth);
var shrinkFactor = ratioHeight > ratioWidth ? ratioHeight : ratioWidth;
fontSize -= shrinkFactor;
} while ((textContainerHeight > maxHeight || textContainerWidth > maxWidth) && fontSize > minFontSize);
};
// watch for changes to text
$scope.$watch('text', function(newText, oldText){
if(newText === undefined) return;
// text was deleted
if(oldText !== undefined && newText.length < oldText.length){
fontSize = $scope.maxFontSize;
}
resizeText();
});
}
};
});
答案 6 :(得分：6)
这是一种改进的循环方法，它使用二进制搜索以尽可能少的步骤找到适合父级的最大可能大小（这比步进固定字体大小更快，更准确）。代码也以多种方式进行了优化以提高性能。
默认情况下，将执行10个二进制搜索步骤，这将达到最佳大小的0.1％。您可以将numIter设置为某个值N，以获得最佳大小的1/2 ^ N.
使用CSS选择器调用它，例如：fitToParent('.title-span');
/**
* Fit all elements matching a given CSS selector to their parent elements'
* width and height, by adjusting the font-size attribute to be as large as
* possible. Uses binary search.
*/
var fitToParent = function(selector) {
var numIter = 10; // Number of binary search iterations
var regexp = /\d+(\.\d+)?/;
var fontSize = function(elem) {
var match = elem.css('font-size').match(regexp);
var size = match == null ? 16 : parseFloat(match[0]);
return isNaN(size) ? 16 : size;
}
$(selector).each(function() {
var elem = $(this);
var parentWidth = elem.parent().width();
var parentHeight = elem.parent().height();
if (elem.width() > parentWidth || elem.height() > parentHeight) {
var maxSize = fontSize(elem), minSize = 0.1;
for (var i = 0; i < numIter; i++) {
var currSize = (minSize + maxSize) / 2;
elem.css('font-size', currSize);
if (elem.width() > parentWidth || elem.height() > parentHeight) {
maxSize = currSize;
} else {
minSize = currSize;
}
}
elem.css('font-size', minSize);
}
});
};
答案 7 :(得分：5)
我将Marcus Ekwall上面的脚本分叉：https://gist.github.com/3945316并根据我的喜好调整它，现在它会在调整窗口大小时触发，以便孩子总是适合它的容器。我已粘贴下面的脚本作为参考。
(function($) {
$.fn.textfill = function(maxFontSize) {
maxFontSize = parseInt(maxFontSize, 10);
return this.each(function(){
var ourText = $("span", this);
function resizefont(){
var parent = ourText.parent(),
maxHeight = parent.height(),
maxWidth = parent.width(),
fontSize = parseInt(ourText.css("fontSize"), 10),
multiplier = maxWidth/ourText.width(),
newSize = (fontSize*(multiplier));
ourText.css("fontSize", maxFontSize > 0 && newSize > maxFontSize ? maxFontSize : newSize );
}
$(window).resize(function(){
resizefont();
});
resizefont();
});
};
})(jQuery);
答案 8 :(得分：4)
这是我对OP答案的修改。
简而言之，许多试图优化此功能的人抱怨说正在使用循环。是的，虽然循环可能很慢，但其他方法可能不准确。
因此，我的方法使用二进制搜索来查找最佳字体大小：
$.fn.textfill = function()
{
var self = $(this);
var parent = self.parent();
var attr = self.attr('max-font-size');
var maxFontSize = parseInt(attr, 10);
var unit = attr.replace(maxFontSize, "");
var minFontSize = parseInt(self.attr('min-font-size').replace(unit, ""));
var fontSize = (maxFontSize + minFontSize) / 2;
var maxHeight = parent.height();
var maxWidth = parent.width();
var textHeight;
var textWidth;
do
{
self.css('font-size', fontSize + unit);
textHeight = self.height();
textWidth = self.width();
if(textHeight > maxHeight || textWidth > maxWidth)
{
maxFontSize = fontSize;
fontSize = Math.floor((fontSize + minFontSize) / 2);
}
else if(textHeight < maxHeight || textWidth < maxWidth)
{
minFontSize = fontSize;
fontSize = Math.floor((fontSize + maxFontSize) / 2);
}
else
break;
}
while(maxFontSize - minFontSize > 1 && maxFontSize > minFontSize);
self.css('font-size', fontSize + unit);
return this;
}
function resizeText()
{
$(".textfill").textfill();
}
$(document).ready(resizeText);
$(window).resize(resizeText);
这也允许元素指定最小和最大字体：
<div class="container">
<div class="textfill" min-font-size="10px" max-font-size="72px">
Text that will fill the container, to the best of its abilities, and it will <i>never</i> have overflow.
</div>
</div>
此外，该算法是无单位的。您可以指定em，rem，%等，并将其用于最终结果。
答案 9 :(得分：2)
我的网站遇到了完全相同的问题。我有一个显示在投影仪，墙壁，大屏幕上的页面..
由于我不知道我的字体的最大大小，我重新使用了@GeekMonkey上面的插件，但增加了字体大小：
$.fn.textfill = function(options) {
var defaults = { innerTag: 'span', padding: '10' };
var Opts = jQuery.extend(defaults, options);
return this.each(function() {
var ourText = $(Opts.innerTag + ':visible:first', this);
var fontSize = parseFloat(ourText.css('font-size'),10);
var doNotTrepass = $(this).height()-2*Opts.padding ;
var textHeight;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
fontSize = fontSize + 2;
} while (textHeight < doNotTrepass );
});
};
答案 10 :(得分：1)
建议的迭代解决方案可以在两个方面大幅加速：
1）将字体大小乘以某个常数，而不是加1或减1。
2）首先，使用一个路线常数为零，比如每个循环的大小加倍。然后，粗略地了解从哪里开始，通过更精细的调整来做同样的事情，比如乘以1.1。虽然完美主义者可能想要理想字体的精确整数像素大小，但大多数观察者并未注意到100和110像素之间的差异。如果你是一个完美主义者，那么重复第三次，进行更精细的调整。
我只是依靠基本的想法和编写代码的变体来处理各种布局问题，而不仅仅是文本，包括拟合div，跨度，图像，...由容器内的宽度，高度，面积，...匹配，与另一个元素相匹配....
以下是一个例子：
var nWindowH_px = jQuery(window).height();
var nWas = 0;
var nTry = 5;
do{
nWas = nTry;
nTry *= 2;
jQuery('#divTitle').css('font-size' ,nTry +'px');
}while( jQuery('#divTitle').height() < nWindowH_px );
nTry = nWas;
do{
nWas = nTry;
nTry = Math.floor( nTry * 1.1 );
jQuery('#divTitle').css('font-size' ,nTry +'px');
}while( nWas != nTry && jQuery('#divTitle').height() < nWindowH_px );
jQuery('#divTitle').css('font-size' ,nWas +'px');
答案 11 :(得分：1)
您可以使用 FitText.js （github page）来解决此问题。与TextFill相比，它真的很小而且效率很高。 TextFill使用昂贵的while循环而FitText则不使用。
FitText也更灵活（我在具有非常特殊要求的proyect中使用它并且像冠军一样工作！）。
HTML：
<div class="container">
<h1 id="responsive_headline">Your fancy title</h1>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>
您还可以为其设置选项：
<script>
jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>
CSS：
#responsive_headline {
width: 100%;
display: block;
}
如果您需要，FitText也有no-jQuery version。
答案 12 :(得分：1)
以下是已接受答案的一个版本，也可以使用minFontSize参数。
(function($) {
/**
* Resizes an inner element's font so that the inner element completely fills the outer element.
* @author Russ Painter WebDesign@GeekyMonkey.com
* @author Blake Robertson
* @version 0.2 -- Modified it so a min font parameter can be specified.
*
* @param {Object} Options which are maxFontPixels (default=40), innerTag (default='span')
* @return All outer elements processed
* @example <div class='mybigdiv filltext'><span>My Text To Resize</span></div>
*/
$.fn.textfill = function(options) {
var defaults = {
maxFontPixels: 40,
minFontPixels: 10,
innerTag: 'span'
};
var Opts = jQuery.extend(defaults, options);
return this.each(function() {
var fontSize = Opts.maxFontPixels;
var ourText = $(Opts.innerTag + ':visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > Opts.minFontPixels);
});
};
})(jQuery);
答案 13 :(得分：1)
编辑：此代码用于在HTML5视频之上显示备注。它会在调整视频大小时（浏览器窗口调整大小时）动态更改字体大小。笔记连接到视频（就像YouTube上的笔记一样），这就是代码使用实例而不是DOM句柄的原因直接
根据请求，我会抛出一些我用来实现此目的的代码。 （HTML5视频上的文本框。）代码是很久以前编写的，我坦率地认为它非常混乱。由于这个问题已经得到回答并且很久以前已经接受了答案，所以我不打算重写这个问题。但是，如果有人想简化这一点，那么你非常欢迎！
// Figure out the text size:
var text = val['text'];
var letters = text.length;
var findMultiplier = function(x) { // g(x)
/* By analysing some functions with regression, the resulting function that
gives the best font size with respect to the number of letters and the size
of the note is:
g(x) = 8.3 - 2.75x^0.15 [1 < x < 255]
f(x) = g(letters) * (x / 1000)^0.5
Font size = f(size)
*/
return 8.3 - 2.75 * Math.pow(x, 0.15);
};
var findFontSize = function(x) { // f(x)
return findMultiplier(letters) * Math.pow(x / 1000, 0.5);
};
val.setFontSizeListener = function() {
p.style.fontSize = '1px'; // So the text should not overflow the box when measuring.
var noteStyle = window.getComputedStyle(table);
var width = noteStyle.getPropertyValue('width');
var height = noteStyle.getPropertyValue('height');
var size = width.substring(0, width.length - 2) * height.substring(0, height.length - 2);
p.style.fontSize = findFontSize(size) + 'px';
};
window.addEventListener('resize', val.setFontSizeListener);
您可能需要将这些数字从font-family调整为font-family。一个好方法是下载名为GeoGebra的免费图形可视化工具。更改文本的长度和框的大小。然后手动设置大小。将手动结果绘制到坐标系中。然后输入我在这里发布的两个方程式，然后调整数字，直到“我的”图形适合您自己手动绘制的点。
答案 14 :(得分：0)
我遇到了同样的问题，解决方案基本上是使用javascript来控制字体大小。 在codepen上查看此示例：
https://codepen.io/ThePostModernPlatonic/pen/BZKzVR
这个例子仅适用于高度，也许你需要在宽度上加一些。
尝试调整大小
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
</style>
</head>
<body>
<div style="height:100vh;background-color: tomato;" id="wrap">
<h1 class="quote" id="quotee" style="padding-top: 56px">Because too much "light" doesn't <em>illuminate</em> our paths and warm us, it only blinds and burns us.</h1>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var multiplexador = 3;
initial_div_height = document.getElementById ("wrap").scrollHeight;
setInterval(function(){
var div = document.getElementById ("wrap");
var frase = document.getElementById ("quotee");
var message = "WIDTH div " + div.scrollWidth + "px. "+ frase.scrollWidth+"px. frase \n";
message += "HEIGHT div " + initial_div_height + "px. "+ frase.scrollHeight+"px. frase \n";
if (frase.scrollHeight < initial_div_height - 30){
multiplexador += 1;
$("#quotee").css("font-size", multiplexador);
}
console.log(message);
}, 10);
</script>
</html>
答案 15 :(得分：0)
我确实喜欢
let name = "Making statements based on opinion; back them up with references or personal experience."
let originFontSize = 15;
let maxDisplayCharInLine = 50;
let fontSize = Math.min(originFontSize, originFontSize / (name.length / maxDisplayCharInLine));
答案 16 :(得分：0)
只想为内容可编辑内容添加我的版本。
$.fn.fitInText = function() {
this.each(function() {
let textbox = $(this);
let textboxNode = this;
let mutationCallback = function(mutationsList, observer) {
if (observer) {
observer.disconnect();
}
textbox.css('font-size', 0);
let desiredHeight = textbox.css('height');
for (i = 12; i < 50; i++) {
textbox.css('font-size', i);
if (textbox.css('height') > desiredHeight) {
textbox.css('font-size', i - 1);
break;
}
}
var config = {
attributes: true,
childList: true,
subtree: true,
characterData: true
};
let newobserver = new MutationObserver(mutationCallback);
newobserver.observe(textboxNode, config);
};
mutationCallback();
});
}
$('#inner').fitInText();#outer {
display: table;
width: 100%;
}
#inner {
border: 1px solid black;
height: 170px;
text-align: center;
display: table-cell;
vertical-align: middle;
word-break: break-all;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outer">
<div id="inner" contenteditable=true>
TEST
</div>
</div>
答案 17 :(得分：0)
我找到了一种防止使用循环收缩文本的方法。它通过将字体大小乘以容器宽度和内容宽度之间的比率来调整字体大小。因此，如果容器的宽度是内容的1/3，则字体大小将减小1/3，容器的宽度也将减小。为了扩大规模，我使用了while循环，直到内容大于容器为止。
function fitText(outputSelector){
// max font size in pixels
const maxFontSize = 50;
// get the DOM output element by its selector
let outputDiv = document.getElementById(outputSelector);
// get element's width
let width = outputDiv.clientWidth;
// get content's width
let contentWidth = outputDiv.scrollWidth;
// get fontSize
let fontSize = parseInt(window.getComputedStyle(outputDiv, null).getPropertyValue('font-size'),10);
// if content's width is bigger than elements width - overflow
if (contentWidth > width){
fontSize = Math.ceil(fontSize * width/contentWidth,10);
fontSize = fontSize > maxFontSize ? fontSize = maxFontSize : fontSize - 1;
outputDiv.style.fontSize = fontSize+'px';
}else{
// content is smaller than width... let's resize in 1 px until it fits
while (contentWidth === width && fontSize < maxFontSize){
fontSize = Math.ceil(fontSize) + 1;
fontSize = fontSize > maxFontSize ? fontSize = maxFontSize : fontSize;
outputDiv.style.fontSize = fontSize+'px';
// update widths
width = outputDiv.clientWidth;
contentWidth = outputDiv.scrollWidth;
if (contentWidth > width){
outputDiv.style.fontSize = fontSize-1+'px';
}
}
}
}
此代码是我已上传到Github https://github.com/ricardobrg/fitText/
的测试的一部分答案 18 :(得分：0)
这是我创建的最优雅的解决方案。它使用二进制搜索，进行10次迭代。天真的方法是执行while循环并将字体大小增加1，直到元素开始溢出。您可以使用 element.offsetHeight 和 element.scrollHeight 确定元素何时开始溢出。如果scrollHeight大于offsetHeight，则字体大小太大。
二进制搜索是一种更好的算法。它还受您要执行的迭代次数的限制。只需调用flexFont并插入div ID，它就会在 8px 和 96px 之间调整字体大小。
我已经花了一些时间研究这个主题并尝试了不同的库，但是最终我认为这是最简单，最直接的解决方案，并且可以实际使用。
请注意，如果需要，可以更改为使用offsetWidth和scrollWidth，或将两者都添加到此功能中。
// Set the font size using overflow property and div height
function flexFont(divId) {
var content = document.getElementById(divId);
content.style.fontSize = determineMaxFontSize(content, 8, 96, 10, 0) + "px";
};
// Use binary search to determine font size
function determineMaxFontSize(content, min, max, iterations, lastSizeNotTooBig) {
if (iterations === 0) {
return lastSizeNotTooBig;
}
var obj = fontSizeTooBig(content, min, lastSizeNotTooBig);
// if `min` too big {....min.....max.....}
// search between (avg(min, lastSizeTooSmall)), min)
// if `min` too small, search between (avg(min,max), max)
// keep track of iterations, and the last font size that was not too big
if (obj.tooBig) {
(lastSizeTooSmall === -1) ?
determineMaxFontSize(content, min / 2, min, iterations - 1, obj.lastSizeNotTooBig, lastSizeTooSmall) :
determineMaxFontSize(content, (min + lastSizeTooSmall) / 2, min, iterations - 1, obj.lastSizeNotTooBig, lastSizeTooSmall);
} else {
determineMaxFontSize(content, (min + max) / 2, max, iterations - 1, obj.lastSizeNotTooBig, min);
}
}
// determine if fontSize is too big based on scrollHeight and offsetHeight,
// keep track of last value that did not overflow
function fontSizeTooBig(content, fontSize, lastSizeNotTooBig) {
content.style.fontSize = fontSize + "px";
var tooBig = content.scrollHeight > content.offsetHeight;
return {
tooBig: tooBig,
lastSizeNotTooBig: tooBig ? lastSizeNotTooBig : fontSize
};
}
答案 19 :(得分：-1)
以下是此解决方案的另一个版本：
shrinkTextInElement : function(el, minFontSizePx) {
if(!minFontSizePx) {
minFontSizePx = 5;
}
while(el.offsetWidth > el.parentNode.offsetWidth || el.offsetHeight > el.parentNode.offsetHeight) {
var newFontSize = (parseInt(el.style.fontSize, 10) - 3);
if(newFontSize <= minFontSizePx) {
break;
}
el.style.fontSize = newFontSize + "px";
}
}