文字サイズは、私は、テキストの最大サイズを計算するには、次の機能を持っている

Question

を破りますか？ Chromeのデバッガでは次のように書かれています。

だから、改行が存在しますが、1行のテキストのように計算されます。

MODIFY

私は、以下の方法で私の機能を変更した（感謝gaetanoM）：

 function MyFitText(width, height, text) 
     { 
      var ourTextArr = []; 

      var texts = text.split('\n'); 
      var fontSize = 20; 
      $.each(texts, function (index, value) { 
       if (value != '') { 
        var ourText = $('span').css('font-weight', 'bold').text(value); 
        ourText.css('font-size', fontSize); 
        ourTextArr.push(ourText); 
       } 
      }); 

      do{ 
       fontSize = fontSize - 1; 
       var textHeight = 0; 
       var textWidth = 0; 
       $.each(ourTextArr, function(index, value) { 
        textHeight += value.height(); 
        if (value.width() > textWidth) 
         textWidth = value.width(); 
        value.css('font-size', fontSize); 
       }); 
      } 
      while ((textHeight > height || textWidth > width) && fontSize > 1); 
      return fontSize; 
     } 

value.width（）は、フォントサイズが変更されたときに変更しましたが、値がされています。 height（）は常に同じままです。どうして？

Answer 1

<span>の高さを測定すると、インライン要素の高さは常に1行の高さになります。テキストのブロックの高さを測定する場合は、ブロックレベルの要素（つまり、<div>）に配置する必要があります。

フォントを調整してテキストを所定の領域に収めようとしていますサイズ - しかし、彼らは一般的に（1次元または他の大きすぎるを残して）何のフィット感を与えないだろうが合うまで、周りに浮いているように、幅と高さの両方を残します。どのようにそれができる作品、私が理解することはできません???

function MyFitText(width, height, text) { 
 
    var $container = $('#container'); 
 
    $container 
 
    .width(width) // <-- set a fixed width 
 
    .html(text.replace(/\n/g, '<br>')) // <-- (so we can measure all together instead of splitting on newlines) 
 
    .css('font-weight', 'bold'); // <-- probably belongs in CSS instead 
 
    
 
    for (var fontSize = 20; fontSize > 0; fontSize--) { 
 
    $container.css('font-size', fontSize+'px'); 
 
    if ($container.height() <= height) { 
 
     break; 
 
    } 
 
    } 
 
    return fontSize; 
 
} 
 

 
// Test rig so you can play with different values: 
 
$('#test').click(function() { 
 
    var w = $('#w').val(); 
 
    var h = $('#h').val(); 
 
    var t = $('#t').val(); 
 
    var size = MyFitText(w,h,t); 
 
    console.log("Set font-size to "+size+"px"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Desired width: <input id="w" value="200"><br> 
 
Desired height: <input id="h" value="400"><br> 
 
Text: <textarea id="t">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 

 
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 
</textarea><br> 
 
<button id="test">Test it</button> 
 

 
<div id="container"></div>