テキストフォントを動的にする親部門の境界内

Question

このHTML要素があります。以下は

<div id="myid_templates_preview_text_1" style="transform: rotate(0deg); border: 1px solid rgb(0, 0, 0); position: absolute; left: 64.5px; top: 144.984px; width: 117px; height: 42px; z-index: 1;"> 
    <p> 
     <span style="color: #000000; font-size: large;">Sample Very Very Long Line Of Text.</span> 
    </p> 
</div> 

出力外観です：

私はdiv要素の境界を超えないように、テキストのフォントを調整したいです。どうすればいい？

UPDATE 1：

実際、イムは、このようにHTML構造を変更することはできません、レイアウト設計者のアプリに取り組んでいます。上記のHTMLコンテンツは、ユーザーによって動的に設計されています。以下はHTML構造の別のサンプルです。それが収まるまで非効率的とはいえ怠惰

<div id="myid_templates_preview_text_2" style="transform: rotate(0deg); border: 1px solid rgb(0, 0, 0); position: absolute; left: 62px; top: 84px; width: 87px; height: 97px; z-index: 1;"> 
    <p style="text-align: center;"> 
     <span style="font-size: medium;"> 
      <strong>Sample Very Very Long Line Of Text.</strong> 
     </span> 
    </p> 
    <p style="text-align: center;"> 
     <span style="font-size: small;"> 
      <strong>Sample Very Very Long Line Of Text.</strong> 
     </span> 
    </p> 
</div> 

Answer 1

一つの解決策は、再帰的にテキストのサイズを変更することです。あなたのマークアップを少し変更して、pタグを削除して読みやすくしました：

#myid_templates_preview_text_1{ 
    transform: rotate(0deg); 
    border: 1px solid rgb(0, 0, 0); 
    position: absolute; 
    left: 64.5px; 
    top: 144.984px; 
    width: 117px; 
    height: 42px; 
    z-index: 1; 
} 

#myid_templates_preview_text_1 span{ 
    color: #000000; 
    font-size: large; 
} 

<div id="myid_templates_preview_text_1"> 
    <span>Sample Very Very Long Line Of Text.</span> 
</div> 

次にコード：ここ

function sizeTextToDiv(){ 
    var wrapper = $('#myid_templates_preview_text_1'); 
    var wh = wrapper.height(); //get the height of the div 
    var s = wrapper.find('span').first(); 
    var ph = s.height(); //get the height of the text 

    if (ph > wh){ 
     //still too big 
     var fs = parseInt(s.css('font-size')); 
     if (isNaN(fs)) fs = 32; //default if non-numeric 
     fs--; //decrease the font size 
     s.css('font-size',fs); 
     sizeTextToDiv(); //do it again 
    } 
} 

$(function(){ 
    sizeTextToDiv(); 
}); 

ワーキングjsfiddle：https://jsfiddle.net/8boxt0xk/

UPDATE 1：

あなたがマークアップを編集することはできませんので、ここではその更新機能がありますフォントのサイズを変更し、フォントの比率を維持します。私はそれがdiv要素にうまく収まるようにするために、あなたのpタグにマージン0を追加します。更新

function sizeTextToDiv(){ 
    var wrapper = $('#myid_templates_preview_text_2'); 
    var wh = wrapper.height(); 
    var ph = 0; 

    wrapper.find('p').each(function(){ 
     ph += $(this).height(); 
    }); 

    console.log(wh, ph); 
    if (ph > wh){ 
     //overflow 
     wrapper.find('span').each(function(){ 
      var s = $(this); 
      var sh = parseInt(s.css('font-size')); 
      if (isNaN(sh)) sh = 28; 
      sh--; 
      s.css('font-size', sh); 
     }); 
     debugger; 
     sizeTextToDiv(); 
    } 
} 

はjsfiddle：https://jsfiddle.net/8boxt0xk/2/

Answer 2

だけの幅と高さを調整します

<div id="myid_templates_preview_text_1" style="transform: rotate(0deg); border: 1px solid rgb(0, 0, 0); position: absolute; left: 64.5px; top: 144.984px; width: 117px; height: 80px; z-index: 1;"> 
 
    <p> 
 
     <span style="color: #000000; font-size: large;">Sample Very Very Long Line Of Text.</span> 
 
    </p> 
 
</div>