Detecting line-breaks in browser/css-forced line breaks

Question

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

The rendered HTML result of above might be,

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

I would like to split the above paragraph into separate paragraphs row by row. So what the expected result is like,

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

Is it possible to implement it in Javascript?

P.S. Why do I have to split it? Because I would like to get my own pagination system for a long HTML, where all the paragraphs and splited paragraphs within a height range would be put in to a same <div class="page"></div>. Finally, the whole HTML would be organized as

<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

Well, assume that your text is in a <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>';
}

Then you can use newHtml to write in a DOM element. For instance, if you like to add it to a the same <p> which you got text from, you do:

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

Also put all of the above codes into a function and call the function after the windows has been fully loaded.

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

// put the code here
}, false);

If your line does not contain break characters, then please refer to this plugin : http://jsfiddle.net/nathan/qkmse/

The above link is suggested in this SO's question:

detecting line-breaks with jQuery?

Answer 2

If you really want to format the text as if word-wrap:break-word; word-break:break-all; were set on the p element (as you say in a comment) and each of the resulting lines is turned to a paragraph, you need code like the following: Process the p element character by character, putting as many characters as fit on one with the given width. When it is exceeded, construct a new p element and proceed with the rest of the text. You can do this by writing the characters to an invisible inline block and checking its rendered width.

Example (note that this really works only when the paragraph contains just text, no markup):

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

I’m pretty sure you should have a completely different approach, but I cannot help with the ultimate problem you are trying to solve, as it was not described.