自动大小的动态文本来填充固定大小的容器我需要显示用户输入到一个固定大小的div文本。我想要的是字体大小被自动调整，以便文本尽可能多地填充方框。因此-如果div是400 pxx300 px。如果有人进入ABC，那么它的字体很大。如果他们输入一个段落，那么它将是一个很小的字体。我可能想从一个最大的字体开始-也许是32 px，当文本太大而不适合容器时，缩小字体大小直到它合适为止。
3 回答
慕侠2389804
TA贡献1719条经验 获得超6个赞
<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猫小萌
TA贡献1911条经验 获得超7个赞
由于性能不佳，我没有发现以前的任何解决方案都是足够的，所以我做了自己的解决方案，使用简单的数学而不是循环。在所有浏览器中都应该运行良好。
根据这个性能测试用例它比这里找到的其他解决方案要快得多。
(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);- 3 回答
- 0 关注
- 556 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消