Convert multi-line wrapped paragraphs into single line paragraphs

Question

Let's say we have this text inside a single <p> that uses the entire screen space:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum 
sem consectetur, tempor massa quis, bibendum mauris. Curabitur et leo 
pharetra, condimentum mi vel, gravida mi. Integer pulvinar nibh in 
laoreet auctor. Donec in tortor in augue maximus fermentum et non erat. 
Sed auctor feugiat dolor eget efficitur. Vivamus nec urna lorem. Duis 
lobortis semper tempor. Vestibulum dolor lectus, consectetur. 

If we were using a smaller display, it would look like something this:

Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Sed vestibulum sem 
consectetur, tempor massa quis, bibendum 
mauris. Curabitur et leo pharetra, 
condimentum mi vel, gravida mi. Integer 
pulvinar nibh in laoreet auctor. Donec 
in tortor in augue maximus fermentum et 
non erat. Sed auctor feugiat dolor eget 
efficitur. Vivamus nec urna lorem. Duis 
lobortis semper tempor. Vestibulum dolor 
lectus, consectetur.

The paragraph has now more lines than before. With that said, I want to convert this single paragraph into one <p> per line to apply different styling to each one of them, but also taking into acount that the number of lines can change from the viewport/browser window size. This is so that the text styling can be responsive.

HTML:

<p>Lorem ipsum dolor sit amet, consectetur</p> 
<p>adipiscing elit. Sed vestibulum sem</p> 
<p>consectetur, tempor massa quis, bibendum</p> 
<p>mauris. Curabitur et leo pharetra,</p> 
<p>condimentum mi vel, gravida mi. Integer</p> 
<p>pulvinar nibh in laoreet auctor. Donec</p> 
<p>in tortor in augue maximus fermentum et</p> 
<p>non erat. Sed auctor feugiat dolor eget</p> 
<p>efficitur. Vivamus nec urna lorem. Duis</p> 
<p>lobortis semper tempor. Vestibulum dolor</p> 
<p>lectus, consectetur.</p>

I'm looking for a pure JavaScript (aka no jQuery) solution.

Answer 1

 document.body.addEventListener("load", function(){ var defaultCharacterWidth = 8; //8 px var textboxWidth = document.querySelector(".orgText").offsetWidth; var breakIndex = Math.floor(textboxWidth/defaultCharacterWidth); var i = 0; var savedIndex = 0; var whitespace = 0; document.querySelector(".orgText").textContent.match(/[\\s\\S]/g).forEach(function(element, index){ if (element.match(/\\s/)) { whitespace = index; } if (i == breakIndex) { i = -1; //get nearest whitespace document.querySelector(".textcontainer").innerHTML += "<p>" + document.querySelector(".orgText").value.slice(savedIndex, whitespace) + "</p>"; savedIndex = whitespace; //save the last whitespace } i++; }); }, true); 

 <textarea class="orgText" style="overflow:hidden;width:100%"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum sem consectetur, tempor massa quis, bibendum mauris. Curabitur et leo pharetra, condimentum mi vel, gravida mi. Integer pulvinar nibh in laoreet auctor. Donec in tortor in augue maximus fermentum et non erat. Sed auctor feugiat dolor eget efficitur. Vivamus nec urna lorem. Duis lobortis semper tempor. Vestibulum dolor lectus, consectetur. </textarea> <div class="textcontainer"> </div> 

This is a little testcode. It uses the fact that a textarea has a fixed character width. But that's not the case for most fonts. The above code iterates over every character and checks if it's exceeds the width of the container based upon the detection of a whitespace character.

You can also use the code below to calculate the width of a string.

function getPixelLengthOfString()
{
    var tempNode = document.createElement("span");
    tempNode.innerHTML = this;
    document.body.appendChild(tempNode);
    var stringPixelLength = tempNode.offsetWidth;
    document.body.removeChild(tempNode);
    return stringPixelLength;
}

These pieces of code should point you in a direction of the correct answer.