Как масштабировать размер текста по сравнению с контейнером

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' 
     }); 
    } 
});