猿问

自动大小的动态文本来填充固定大小的容器

自动大小的动态文本来填充固定大小的容器

我需要显示用户输入到一个固定大小的div文本。我想要的是字体大小被自动调整，以便文本尽可能多地填充方框。

因此-如果div是400 pxx300 px。如果有人进入ABC，那么它的字体很大。如果他们输入一个段落，那么它将是一个很小的字体。

我可能想从一个最大的字体开始-也许是32 px，当文本太大而不适合容器时，缩小字体大小直到它合适为止。


波斯汪
浏览 511回答 3
3回答

慕侠2389804

虽然我非常喜欢这个问题的答案(谢谢！)，但这并不是解决这个问题的最好方法。请查看这里的其他一些精彩的答案，特别是那些没有循环的解决方案。不过，为了参考起见，这是我的原始答案:<html><head><style&nbsp;type="text/css"> &nbsp;&nbsp;&nbsp;&nbsp;#dynamicDiv&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;#CCCCCC; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;300px; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;64px; &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden; &nbsp;&nbsp;&nbsp;&nbsp;}</style><script&nbsp;type="text/javascript"> &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;shrink() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;textSpan&nbsp;=&nbsp;document.getElementById("dynamicSpan"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;textDiv&nbsp;=&nbsp;document.getElementById("dynamicDiv"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textSpan.style.fontSize&nbsp;=&nbsp;64; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while(textSpan.offsetHeight&nbsp;>&nbsp;textDiv.offsetHeight) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textSpan.style.fontSize&nbsp;=&nbsp;parseInt(textSpan.style.fontSize)&nbsp;-&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}</script></head><body&nbsp;onload="shrink()"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="dynamicDiv"><span&nbsp;id="dynamicSpan">DYNAMIC&nbsp;FONT</span></div></body></html>这里有一个版本班:<html><head><style&nbsp;type="text/css">.dynamicDiv{ &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;#CCCCCC; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;300px; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;64px; &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;}</style><script&nbsp;type="text/javascript"> &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;shrink() &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;textDivs&nbsp;=&nbsp;document.getElementsByClassName("dynamicDiv"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;textDivsLength&nbsp;=&nbsp;textDivs.length; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Loop&nbsp;through&nbsp;all&nbsp;of&nbsp;the&nbsp;dynamic&nbsp;divs&nbsp;on&nbsp;the&nbsp;page &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;i=0;&nbsp;i<textDivsLength;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;textDiv&nbsp;=&nbsp;textDivs[i]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Loop&nbsp;through&nbsp;all&nbsp;of&nbsp;the&nbsp;dynamic&nbsp;spans&nbsp;within&nbsp;the&nbsp;div &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;textSpan&nbsp;=&nbsp;textDiv.getElementsByClassName("dynamicSpan")[0]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Use&nbsp;the&nbsp;same&nbsp;looping&nbsp;logic&nbsp;as&nbsp;before &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textSpan.style.fontSize&nbsp;=&nbsp;64; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while(textSpan.offsetHeight&nbsp;>&nbsp;textDiv.offsetHeight) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textSpan.style.fontSize&nbsp;=&nbsp;parseInt(textSpan.style.fontSize)&nbsp;-&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}</script></head><body&nbsp;onload="shrink()"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="dynamicDiv"><span&nbsp;class="dynamicSpan">DYNAMIC&nbsp;FONT</span></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="dynamicDiv"><span&nbsp;class="dynamicSpan">ANOTHER&nbsp;DYNAMIC&nbsp;FONT</span></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="dynamicDiv"><span&nbsp;class="dynamicSpan">AND&nbsp;YET&nbsp;ANOTHER&nbsp;DYNAMIC&nbsp;FONT</span></div></body></html>
0

Smart猫小萌

由于性能不佳，我没有发现以前的任何解决方案都是足够的，所以我做了自己的解决方案，使用简单的数学而不是循环。在所有浏览器中都应该运行良好。根据这个性能测试用例它比这里找到的其他解决方案要快得多。(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);
0
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

JQuery
Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
我要回答