如何自動調整內容字體大小以適合其範圍

編輯：好的，所以我錯誤地處理了這個問題：按照我的意圖去做，我只需要檢查是否有溢出。如何自動調整內容字體大小以適合其範圍

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

<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

如何自動調整內容字體大小以適合其範圍

回答

相關問題