Jquery - Paragraph Textを親に合わせて適用する

Question

親divに動的に生成されたテキストを収めようとしています。問題は、テキストの長さが日々変化し、時には親divをオーバーフローさせることです。私は、テキストサイズを拡大するフォーラムをたくさん見たり、コンテナを埋めるためにコンテンツを伸ばしたりしていますが、私が使用するコンテンツは、設定されたフォントサイズと行の高さを維持する必要があります。

私は、負の最大と正のカーニング制限を設定できるJqueryベースのカーニング方法を探しています。限界に達しても内容がまだ適合しない場合、最後の文が削除され、カーニング手順が再び開始されます。これは、コンテンツが親に適合するまで、必要に応じて繰り返されます。

https://jsfiddle.net/j61xke31/

HTML：

<div class="parent"> 
    <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae ex eget eros posuere ullamcorper non id magna. Suspendisse augue lorem, ornare ut aliquam eu, molestie nec mauris. In luctus erat sit amet accumsan laoreet. Fusce a dolor in ex efficitur 
cursus ac id orci. Integer quis quam molestie elit posuere maximus eget a diam. Proin lacinia pharetra lacus rutrum vestibulum. Etiam id augue mi. Nam efficitur pellentesque varius. Curabitur dui nisi, consectetur eu porttitor nec, sodales sed diam. 
Phasellus gravida molestie fermentum. Curabitur non felis sit amet nisi facilisis tincidunt. Suspendisse quis tempus sem. 
    </p> 
</div> 

CSS

.parent { 
    width: 250px; 
    height: 182px; 
    border: 1px solid black; 
} 

.content { 
    font-size: 12px; 
    line-height: 14px; 
    font-family: Arial, Sans Serif; 
    letter-spacing: 0; 
    margin: 0 
} 

問題上の任意のヘルプは高く評価されます。

Answer 1

を試してみてください、これは非常に簡単です：kerningText：

は、再帰関数の例を作成します。削減文字間隔が必要でないか（または文字間隔下限に達した場合は中止）されている場合、その関数内

は、チェックのために、現在のparent height、現在content height現在content letter-spacingを取得します。

var parentHeight = $('.parent').innerHeight(); 
var contentHeight = $('.content').innerHeight(); 
var contentLS = parseFloat($('.content').css('letter-spacing')); 

：あなたのコンテンツは、親はあなたがオーバーフローを持っていることを意味よりも高い場合

（注意それ以外の場合は、コードの2行目に- 0.1を行うことはできませんので、あなたが-0.1pxから-0.1を取得parseFloatを使用）そして、あなたの最低の文字間隔の限界に達していない、あなたは0.1pxでletter-spacingを削減する必要があります。

$('.content').css('letter-spacing', contentLS - 0.1); 

はその後、自分自身を呼び出し、ヨーヨーまで作業を繰り返し親がフィットするか、letter-spacingに達しました。

$(document).ready(function() { 
 
    function kerningText() { 
 
    var parentHeight = $('.parent').innerHeight(); 
 
    var contentHeight = $('.content').innerHeight(); 
 
    var contentLS = parseFloat($('.content').css('letter-spacing')); 
 

 
    // check if letter-spacing bigger than the lower bound -1 
 
    if (contentHeight > parentHeight && contentLS > -1) { 
 
     //reduce the letter-spacing by 0.1 
 
     $('.content').css('letter-spacing', contentLS - 0.1); 
 
     //recursive until the content fit 
 
     kerningText(); 
 
    } 
 
    } 
 

 
    $('#kerningBtn').on('click', kerningText); 
 
});

.parent { 
 
    width: 250px; 
 
    height: 182px; 
 
    border: 1px solid black; 
 
} 
 

 
.content { 
 
    font-size: 12px; 
 
    line-height: 14px; 
 
    font-family: Arial, Sans Serif; 
 
    letter-spacing: 0; 
 
    margin: 0 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="kerningBtn">Kerning Text Now</button> 
 

 
<div class="parent"> 
 
    <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae ex eget eros posuere ullamcorper non id magna. Suspendisse augue lorem, ornare ut aliquam eu, molestie nec mauris. In luctus erat sit amet accumsan laoreet. Fusce a dolor in ex efficitur 
 
    cursus ac id orci. Integer quis quam molestie elit posuere maximus eget a diam. Proin lacinia pharetra lacus rutrum vestibulum. Etiam id augue mi. Nam efficitur pellentesque varius. Curabitur dui nisi, consectetur eu porttitor nec, sodales sed diam. 
 
    Phasellus gravida molestie fermentum. Curabitur non felis sit amet nisi facilisis tincidunt. Suspendisse quis tempus sem. 
 
    </p> 
 
</div>

Answer 2

はjQueryを使って、この

$(document).ready(function(){ 
    $('.parent').height($('.content').height()); 
});