自动大小的动态文本来填充固定大小的容器
自动大小的动态文本来填充固定大小的容器
波斯汪浏览 516回答 3
3回答
-
慕侠2389804
虽然我非常喜欢这个问题的答案(谢谢！)，但这并不是解决这个问题的最好方法。请查看这里的其他一些精彩的答案，特别是那些没有循环的解决方案。不过，为了参考起见，这是我的原始答案:<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> -
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);
随时随地看视频慕课网APP
JQuery
Html/CSS