获取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>标签已被赋予了宽度，高度，字体大小等

我所拥有的是文本的一大块，我分为固定宽度和高度的段落。我必须弄清楚的是，文本块中的多少文本（多少个单词）将很好地适合该段落。说如果该段有7行，我想正好适合7行文本。不是6.5行，而不是7.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，将一个字符放在其中，取其高度，然后继续追加字符，直到高度突然增加，表明它的字-包裹。然后删除单个字符（或单词），直到高度恢复到原始值，并再次设置高度（因为您说高度已定义）。冲洗，重复以下几行（因为它们不会有相同数量的字符，除非您使用固定宽度的字体）。

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/