Question

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

上面呈现的HTML结果可能是，

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

我想将上一段拆分成单独的段落。那么期望的结果是什么，

<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>

是否可以在Javascript中实现它？

P.S。为什么我要分开它？因为我想为一个很长的HTML获得我自己的分页系统，其中高度范围内的所有段落和分段段落将被放入相同的<div class="page"></div>。最后，整个HTML将被组织为

<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>

Answer 1

好吧，假设您的文字位于<p id='wholeText'>：

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>';
}

然后您可以使用newHtml来编写DOM元素。例如，如果您想将其添加到您从中获取文本的<p>，您可以：

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

同样将上述所有代码放入一个函数中，并在窗口完全加载后调用该函数。

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

// put the code here
}, false);

如果您的专线不包含break characters，请参阅此插件： http://jsfiddle.net/nathan/qkmse/

以上链接在本SO的问题中提出：

detecting line-breaks with jQuery?

Answer 2

如果您确实要格式化文本，就像在word-wrap:break-word; word-break:break-all;元素上设置了p一样（正如您在评论中所说的那样）并且每个结果行都转换为段落，那么您需要代码如下：逐个字符处理p元素，在给定宽度的字符上放置尽可能多的字符。超过时，构造一个新的p元素并继续其余的文本。您可以通过将字符写入不可见的内联块并检查其渲染宽度来完成此操作。

示例（请注意，只有当段落只包含文本，没有标记时，这才真正起作用）：

<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>

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

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

2 个答案: