如何自动调整内容字体大小以适合其范围

编辑：好的，所以我错误地处理了这个问题：按照我的意图去做，我只需要检查是否有溢出。如何自动调整内容字体大小以适合其范围

下面是代码（如果它可以帮助任何人）：

<script type="text/javascript"> 
function textfit(){ 
    var spans = document.body.getElementsByTagName("span"); 

    for(var i = 0, l = spans.length; i < l; i++){ 
     var span = spans[i]; 
     var font = window.getComputedStyle(span, null).getPropertyValue('font-size');  
     var fontSize = parseInt(font); 

    do { 
     span.style.fontSize = (fontSize --) + "px"; 
    } while (span.scrollHeight > span.clientHeight || span.scrollWidth > span.clientWidth); 

    } 
} 

$(document).ready(function() { 
    textfit(); 
}); 

</script>

旧文章：

我的问题很简单：我有一个HTML页面有很多跨度，但不是全部他们有相同的内容。关于这一点，我想调整每个内容的字体大小以适合其跨度;请注意，我不想削减textcontent，或者如果太长，请加点，我只是想修改fontSize。

JS：

function = textfit(){ 
    var spans = document.body.getElementsByTagName("span"); 

    for(var i = 0, l = spans.length; i < l; i++){   
     var maxHeight = spans[i].offsetHeight; 
     var maxWidth = spans[i].offsetWidth;   
     var textHeight = $(spans[i].textContent).height(); 
     var textWidth = $(spans[i].textContent).width(); 
     var fontSize = spans[i].style.fontSize; 

     do { 
      fontSize = fontSize - 1; 
     } while (textHeight > maxHeight || textWidth > maxWidth); 

    } 
} 

$(document).ready(function() { 
    textfit(); 
});

HTML/CSS：

<style> 
    span{ 
     display: inline-block; 
     width: 100px; 
     height: 100px; 
     font-size: 20pt;  
    } 
</style> 
     ...... 
<body> 
    <div> 
     <span>SMALL</span> 
     <span>MEEEEEEEEEEEEEDIUM</span> 
     <span>HUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUGE</span> 
    </div> 
</body>

正如你可以看到，我使用的是 “为” 通过每一个跨度和运行“做... while while“来调整每个字体的字体大小。

我的问题：

它看起来像我不能得到的TextContent尺寸（得到一个“零”，而不是）
同样的事情与字体大小（我得到一个空字符串）

或者，也许我接近问题的错误的方式，我需要以不同的方式做到这一点...

NB：JS们对我来说有点“新”很抱歉，如果我没有新秀的错误

来源

2014-01-21 krema

你被fontSize = fontSize - 1;正在重置一个局部变量，在一个相关的说明，textHeight和textWidth不会被改变字体大小自动更新，他们是局部变量。

另一方面，您需要将您的文本包裹在一个附加元素中以便能够测量其尺寸。

<style> 
    .wrapper{ 
     display: inline-block; 
     width: 100px; 
     height: 100px; 
     font-size: 20pt;  
    } 
</style> 
     ...... 
<body> 
    <div> 
     <span class='wrapper'><span>SMALL</span></span> 
     <span class='wrapper'><span>MEEEEEEEEEEEEEDIUM</span></span> 
     <span class='wrapper'><span>HUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUGE</span></span> 
    </div> 
</body>

JS：

function = textfit(){ 
    var spans = document.body.getElementsByClassName("wrapper"); 

    for(var i = 0, l = spans.length; i < l; i++){ 
     var span = spans[i]; 
     var maxHeight = span.offsetHeight; 
     var maxWidth = span.offsetWidth;   
     var fontSize = parseInt(span.style.fontSize); 

     do { 
      var textHeight = span.firstChild.offsetHeight(); 
      var textWidth = span.firstChild.offsetWidth(); 
      span.style.fontSize = (fontSize --)+"pt"; 
     } while (textHeight > maxHeight || textWidth > maxWidth); 
     //PS I suggest a binary-search-like algorithm to save time 

    } 
} 

$(document).ready(function() { 
    textfit(); 
});

来源

2014-01-21 13:05:44 Mabedan

感谢您的回答。我认为offsetHeight/Width会导出CSS中提到的跨度高度和宽度......我不明白为什么它取决于它的内容，因为宽度和高度是固定的，不会改变。对此，我该如何获得这个HTML元素的大小呢？ – krema

你是对的，我没有注意到CSS中的前缀大小。在这种情况下，您需要将自己的文本封装在一个自由格式元素中以便能够对其进行测量。我会编辑我的答案。 – Mabedan

嗯，我得到一个无限循环atm与你的答案;另外，它看起来像我仍然无法获得字体大小（改为“NaN”）。 – krema

如何自动调整内容字体大小以适合其范围

回答

相关问题