pタグの行の文字数を取得しますか？

Question

私は一部のテキストを<p>タグの中に入れたいと思っています。

HTML：

<p id="mainTargetP"> 

</p> 

はJavaScript：

var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. a a a Nullam nec magna eu dui pharetra bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at urna mi." 
var mainTargetP = document.getElementById('mainTargetP') ; 
// mainTargetP.innerHTML = get a part of text into P. 

<p>タグは、幅、高さ、フォントサイズを与えられているなど

私は何を持っていることは、テキストの大きなブロックであります、私は固定された幅と高さのパラに分けています。私が理解しなければならない正確なことは、テキストのブロックからどのくらいのテキスト（いくつの単語）がパラにうまく収まるかということです。 paraに7行があるとすれば、ちょうど7行のテキストに収まりたいと思う。 7.5行ではなく、6.5行ではありません。可能？

基本的に私はこのように、任意の空白は最後の行に残されたくない：

テキストのいくつかのブロックで動作する仮のソリューション：上記

var charsInLine = 63 ; 
var lines = 7 
var charsinTargetP = charInLine * lines - 20 ; 
var mainTargetP = document.getElementById('mainTargetP') ; 

var s1 =text.substring(0,charsinTargetP) ; 
var nextPara = s1.lastIndexOf(' ') 
mainTargetP.innerHTML = s1.substring(0,nextPara) ; 

-20値はランダムに取っています。値が-40である必要があることがあります。

私は明確でした、ありがとう。

Answer 1

段落の高さを一時的にautoに設定し、文字を1つ入れ、高さをとり、高さが突然増加するまで続けて、単語があることを示します - 包まれた。次に、高さが元の値に戻るまで個々の文字（または単語など）を削除し、高さが定義されているので、再度高さを設定します。リンスするには、次の行を繰り返します（固定幅フォントを使用している場合を除き、同じ数の文字は使用できません）。

Answer 2

以下はjQueryベースのソリューションです。

HTML：

<p class="target font"></p> 
<p class="target font"></p><!-- create as many tags as many pages you want --> 

CSS：

.target { 
    width: 200px; 
    height: 100px; 
    border: 1px solid black; 
    overflow: hidden; 
} 

.font { 
    font-size: 12pt; 
    text-align: justify 
} 

JS：

var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. a a a Nullam nec magna eu dui pharetra bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at urna mi."; 
// element which will be appended to the end of each p tag and will cause line break 
var justify = ' <span style="visibility:hidden;">something_very_very_very_long</span>'; 

var p = $('.target'); 
var q = $('<p class="font"></p>"'); 
q.css('width', p.width() + 'px'); 
q.text(text); 

$(document.body).append(q); 

var h = p.height(); 

var newText = text; 
for (var i = 0, j = 0; i < p.length; ++i) { 
    while (q.height() > h) { 
     newText = newText.substr(0, newText.lastIndexOf(' ')); 
     q.text(newText); 
    } 
    $(p[i]).html(newText + justify); 

    j += newText.length + 1; 
    newText = text.substr(j); 
    q.html(newText); 
} 

q.detach(); 

ワーキングサンプル：http://jsfiddle.net/9BBPA/7/