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

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

• javascript
• html
• css
• pdf-generation

• The description at the start is incorrect. Browsers don’t break words by default. It is unclear what you want: by what criteria should the paragraph be broken? It is also unclear how this related to pagination. – Jukka K. Korpela Commented Jul 27, 2014 at 10:13
• Yes. Let's just assume one paragraph will be broken into rows by e.g. word-wrap:break-word; word-break:break-all; @JukkaK.Korpela – ppn029012 Commented Jul 27, 2014 at 10:48
• check this link - letteringjs., it may help you – Harpreet Singh Commented Jul 27, 2014 at 10:51
• @HarpreetSingh thx, it would be a good idea to iterate each letter and determine whether to separate it by its Y-offset. – ppn029012 Commented Jul 27, 2014 at 11:03
• try changing font - use fixed length character font – Harpreet Singh Commented Jul 27, 2014 at 14:01

2 Answers 2

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/nathan/qkmse/

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

detecting line-breaks with jQuery?

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 ment) 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 pletely different approach, but I cannot help with the ultimate problem you are trying to solve, as it was not described.