获取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中很好地适应。如果para有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/