Javascript 在浏览器/css中检测换行符强制换行

我想把上述段落一行一行地分成几个单独的段落。那么预期的结果是什么呢,

I am some ra
ndom text. I
am Some text
.blabla

我有点像ra
ndom文本。我

我有一些文字
.blabla

可以用Javascript实现吗

还有，为什么我要把它分开？因为我想为一个长HTML建立我自己的分页系统，在这个系统中，高度范围内的所有段落和拆分段落都将放在同一个

中。最后，整个HTML将被组织为

<p style="width:60px">I am some ra</p>
<p style="width:60px">ndom text. I</p>
<p style="width:60px">am Some text</p>
<p style="width:60px">.blabla</p>

完整内容

XXX的上半部分

XXX的底部

…

好吧，假设您的文本位于

中：

<div id="page1" class="page">
   <p> complete content </p>
   <p> upper part of XXX </p>
</div>

<div id="page2" class="page">
   <p> bottom part of XXX </p>
   <p>...</p><p>...</p>
</div>

另外，将上述所有代码放入一个函数中，并在windows完全加载后调用该函数

element.innerHTML = newHtml; // remember element refers to the <p> with the ID of wholeText

如果您的行不包含

中断字符

，请参考此插件：

在本SO的问题中建议使用上述链接：

---

如果您真的想将文本格式化为

wordwrap:break-word；单词break：打破一切p

元素上设置了code>（如您在注释中所说），并且生成的每一行都变成了一个段落，您需要如下代码：逐个字符处理

p

元素，在给定宽度的一行上放置尽可能多的字符。当超过该值时，构造一个新的

p

元素，并继续处理文本的其余部分。可以通过将字符写入不可见的内联块并检查其渲染宽度来完成此操作

示例（请注意，只有当段落仅包含文本而不包含标记时，这才有效）：

我是一些随机文本。我在发短信
var宽度=60；
var p=document.getElementById（'p'）；
var parent=p.parentNode；
var line=document.createElement（'span'）；
line.style.display='inline block'；
line.style.visibility='hidden'；
var content=p.innerHTML；
document.body.appendChild（行）；
var start=0；
var i=1；
而（iwidth）{
var newp=document.createElement（'p'）；
newp.style.width=宽度+px；
newp.innerHTML=content.substring（start，i-1）；
parent.insertBefore（newp，p）；
start=i-1；
i=开始+1；
}
否则{
i++；
}
}
newp=document.createElement（'p'）；
newp.style.width=宽度+px；
newp.innerHTML=content.substring（开始）；
parent.insertBefore（newp，p）；
父母离体儿童（p）；

---

我很确定您应该采用完全不同的方法，但我无法帮助解决您试图解决的最终问题，因为它没有被描述。

开头的描述不正确。默认情况下，浏览器不会打断单词。你想要什么还不清楚：根据什么标准应该打破这一段？也不清楚这与分页的关系。是的。让我们假设一个段落将被拆分成行，例如：wrap:break-word；单词break：打破一切@这个链接-，可能会有帮助you@HarpreetSinghthx，迭代每个字母并确定是否按其Y偏移量分隔是个好主意。尝试更改字体-使用固定长度字符字体谢谢您的回答。原始文本不包含任何“\r”或“\n”。分词仅由CSS控制。@ppn029012我搜索了很多地方，找到了一个解决方案，请查看更新答案的底部部分。如果答案解决了你的问题，那么如果你接受我的答案，我将不胜感激。这是解决方案之一，但它只适用于用空格分隔的单词。在我的情况下，我必须修改它，以调整文字之间没有任何空白。这个答案首先提出了一个问题的解决方案，而这个问题显然不是所问的问题。后来又添加了两个链接，作为解决问题的建议。仅链接的答案通常不会被视为真正的答案。您的解决方案与其他答案类似。实际上，最终的目标是，将长HTML转换为PDF页面。每个页面的页眉基于呈现PDF的第一行内容（运行页眉）。但我无法预测第一个分区会是什么，因此我尝试实现自己的分页，并在每个分页分区之前添加

分页符。关键区别在于，此解决方案不希望在源代码中找到换行符（在问题中的示例中，没有），并根据宽度要求找到分页符，不是源换行符。我仍然不明白这个问题与分页有什么关系。如果您认为需要将一个逻辑段落拆分为多个
p
元素，则在解决原始问题的前几个步骤中可能存在错误。是的。另一个答案首先讨论了源代码行中断，然后在我对其进行评论后，他们对其进行了更改。好啊当我们将一个长html拆分为页面时，我们需要将段落安排为适当的页面。但一些靠近边缘的段落需要分为两部分。e、 g.第n页应为一段中的3行，该段中的其余4行应安排在下一页。所以我们需要把一个p分成两个。
var element = document.getElementById("wholeText");

var wholeText = element.innerHTML;

var splitText = wholeText.split("\r\n");

var newHtml = null;

for(var i = 0; i < splitText.length; i++)
{
   newHtml += "<p class='each-line'>"+splitText[i]+'</p>';
}

element.innerHTML = newHtml; // remember element refers to the <p> with the ID of wholeText

window.addEventListener("load", function(){

// put the code here
}, false);

<p style="width:60px" id=p> I am some random text. I am Some text.blabla</p>
<script>
var width = 60;
var p = document.getElementById('p');
var parent = p.parentNode;
var line = document.createElement('span');
line.style.display = 'inline-block';
line.style.visibility = 'hidden';
var content = p.innerHTML;
document.body.appendChild(line);
var start = 0;
var i = 1;
while(i < content.length) {
  line.innerHTML = content.substring(start, i);
  console.log(i + ' ' + content.length);
  if(line.clientWidth > width) {
     var newp = document.createElement('p');
     newp.style.width = width + 'px';
     newp.innerHTML = content.substring(start, i - 1);
     parent.insertBefore(newp, p);
     start = i - 1;
     i = start + 1;
   }
   else {
     i++;
   }
}
newp = document.createElement('p');
newp.style.width = width + 'px';
newp.innerHTML = content.substring(start);
parent.insertBefore(newp, p);
parent.removeChild(p);
</script>