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

我有一大块文本，我将其分成固定宽度和高度的段落。我必须弄清楚的确切事情是文本 block 中有多少文本(多少单词)可以很好地适合段落。假设段落有 7 行，我想正好适合 7 行文本。不是 6.5 行，不是 7.5 行。可能吗？

基本上我不想在最后一行留下任何空格，像这样:

适用于某些文本 block 的临时解决方案:

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，在里面放一个字符，取它的高度，然后不断追加字符，直到高度突然增加, 表明它已经自动换行。然后删除单个字符(或单词，无论什么)直到高度回到其原始值，然后再次设置高度(因为你说高度已定义)。冲洗，重复以下行(因为它们不会有相同数量的字符，除非您使用固定宽度的字体)。