如何縮放與容器相比的文字大小

Question

如何根據容器大小縮放文字大小。其他問題表明它不能用CSS來完成，如果不是，你會怎麼做呢？

Answer 1

這裏是設置文本以適應容器的寬度的方法。它的工作方式是逐漸增加隱藏div的字體大小，直到它小於要將文本放入其中的容器的寬度。然後它將容器的字體大小設置爲隱藏的div的字體大小。

這有點低效，可以通過緩存容器的舊寬度，然後根據容器的寬度如何改變從舊字體大小增加到更大或更小的值來優化。

的jsfiddle：http://jsfiddle.net/sarathijh/XhXQk/

<div class="scale-text styles"> 
    This is a test of scaling text to fit the container. Lorem Ipsum Dolor Sit Amet. 
</div> 
<div id="font-metrics"></div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script> 
    var fontMetrics = document.getElementById('font-metrics'); 
    var scaleTexts = $('.scale-text'); 

    $(window).on('resize', updateFontSize); 
    updateFontSize(); 

    function updateFontSize() 
    { 
     scaleTexts.each(function() 
     { 
      var $scaleText = $$(this); 

      fontMetrics.innerHTML = this.innerHTML; 
      fontMetrics.style.fontFamily = $scaleText.css('font-family'); 
      fontMetrics.style.fontWeight = $scaleText.css('font-weight'); 
      fontMetrics.style.fontStyle = $scaleText.css('font-style'); 
      fontMetrics.style.textTransform = $scaleText.css('text-transform'); 

      var fontSize = 50; // max font-size to test 
      fontMetrics.style.fontSize = fontSize + 'px'; 

      while ($$(fontMetrics).width() > $scaleText.width() && fontSize >= 0) 
      { 
       fontSize -= 1; 
       fontMetrics.style.fontSize = fontSize + 'px'; 
      } 

      this.style.fontSize = fontSize + 'px'; 
     }); 
    } 

    /** 
    * A simple caching function for jQuery objects. 
    */ 
    function $$(object) 
    { 
     if (!object.jquery) 
      object.jquery = $(object); 

     return object.jquery; 
    } 
</script> 

Answer 2

你應該能夠做到這一點使用jQuery - 像..

$('#cooldiv').css('font-size', '100%') 

和

$("#cooldiv").animate({ 
    'width' : (xWidth * (35/100)) + 'px', 
    'minWidth' : (xWidth * (35/100)) + 'px', 
    'maxWidth' : (xWidth * (35/100)) + 'px', 
    'fontSize' : (xWidth * (35/100)) + '%' 
}, 1000); 

Answer 3

我不能工作了如何使用CSS做，所以我用純JS（不需要jquery）。

var els = document.getElementsByClassName('abc') 
for (var i = 0; i < els.length; i++){ 
    els[i].style.fontSize = els[i].clientHeight + 'px' 
} 

實施例：http://jsfiddle.net/nickg1/H64mQ/

Answer 4

下面是如何實現它 - 我包裹在一個跨距中的文本，並調整下來用CSS變換：

<div id="fit-text-in-here"> 
    <span>Scale this text to fit inside the parent div.</span> 
</div> 

的jQuery：

$(function(){ 
    var textWidth = $('#fit-text-in-here span').width(), 
     fitWidth = $('#fit-text-in-here').width(); 

    if (textWidth > fitWidth) { 
     var scaleTo = fitWidth/textWidth, 
      offset = (fitWidth - textWidth)/2; 

     $('#fit-text-in-here span').css({ 
      '-moz-transform': 'scale('+scaleTo+')', 
      '-webkit-transform': 'scale('+scaleTo+')', 
      '-o-transform': 'scale('+scaleTo+')', 
      'transform': 'scale('+scaleTo+')', 
      'margin-left': offset, 
      'display': 'inline-block' 
     }); 
    } 
});