How to transform the text of a div into lines with <p>

Question

Suppose you have one div, and that it has an enormous text, and you would like each line to be transformed into <p>. How would it work?

What I really want is, at the beginning of every line of div that has > keep the green color, however, when trying to do this, it takes the whole text.

Example:

<p>Aqui está o texto todo, do nada quebro uma linha
>porém agora esta linha tem um caractere no começo
e este caractere fará com que mude a cor somente da linha
</p>

I took a script a guy asked in a question my previous and edited, but it goes in the whole text, and not just the line

$(document).ready(function(){
var green = $('#gt').val();
var first = green.charAt(0);
if(first == '>' || '>'){
    $('#gt').addClass('green');
}else{
    $('#gt').removeClass('green');
}});

Who can clarify how this works, I will be grateful. :)

Answer 1

look, maybe you don’t need to break your div, you can add an image with the ">" as background of p, then seven the line-height, padding-left and the background-size for the same value.

#lipsum p {
  line-height: 18px;
  padding-left: 18px;  
  background-size: 18px;
  background-image: url('http://cdn.flaticon.com/svg/81/81068.svg');
  background-repeat: repeat-y
}

<div id="lipsum">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo quam, dictum non elit quis, semper interdum purus. Nulla facilisi. Morbi semper consectetur turpis, ac vulputate lacus aliquet a. Morbi finibus, ligula et congue pretium, urna lacus faucibus felis, quis commodo risus sem in nisl. Proin nec pharetra tortor, et convallis odio. Morbi lorem turpis, eleifend in aliquet id, efficitur et magna. Nullam ac tellus ac felis euismod convallis.
  </p>
  <p>
    In a dolor in mi consectetur ornare tincidunt id quam. Sed euismod sit amet dui sit amet tempus. Duis vitae vulputate nisl. Integer nec erat vehicula, pulvinar risus non, bibendum ipsum. Vestibulum sed fringilla magna. Donec facilisis ultricies fermentum. Nulla quis neque massa. Praesent hendrerit lorem dui, eu pharetra nunc semper sit amet. Integer fringilla ante mattis nunc sodales rutrum. Integer ut dui nibh. Sed dictum ut massa in porta. Curabitur nec mauris commodo est vestibulum rhoncus ut interdum urna.
  </p>
  <p>
    Quisque in luctus dui, in ullamcorper erat. Nullam ac massa et dolor varius luctus. Mauris finibus, lectus quis tempus tempor, urna mi placerat risus, quis consectetur justo justo vel ante. Maecenas lacinia, quam et pulvinar pharetra, erat eros scelerisque sem, non interdum enim leo iaculis leo. Curabitur ullamcorper ultrices tincidunt. Mauris imperdiet ullamcorper mollis. Maecenas eget quam arcu. Nullam eleifend mauris et dui vehicula vehicula. Ut euismod nibh in est pulvinar facilisis. Suspendisse rutrum tempus eros non imperdiet. Mauris eget lacus ut sapien maximus ullamcorper eget et metus. Curabitur justo risus, auctor in pharetra non, ultrices eu sem. Praesent commodo enim sed maximus semper. Sed feugiat facilisis efficitur. Vestibulum vitae venenatis nulla, sit amet volutpat urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
  <p>
    Aliquam erat volutpat. Sed elementum urna ut massa sagittis convallis. Etiam cursus dictum nulla, nec bibendum odio dapibus et. Maecenas cursus vitae libero ac interdum. Nunc facilisis est turpis, id tincidunt leo blandit nec. Nulla efficitur, sapien in ullamcorper aliquet, sapien lacus semper purus, eleifend vulputate risus risus eget sapien. Curabitur sollicitudin lectus eget dapibus malesuada. Sed eget nulla at est iaculis cursus at sed urna. Maecenas vestibulum id nibh eget dictum.
  </p>
  <p>
    Nam consequat leo vel turpis vehicula finibus. Nulla gravida eget ante ut vestibulum. Donec ac ante quis purus facilisis dapibus eu in tortor. Ut quis nunc velit. Donec malesuada dolor sit amet tempus venenatis. Suspendisse dictum velit pretium, pharetra purus eu, maximus augue. Nam et velit et felis dapibus interdum. Sed hendrerit magna mauris, vel elementum nisl lobortis ac. Integer ultrices in augue sit amet feugiat. Donec gravida sollicitudin tellus, sed imperdiet eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu volutpat quam, nec lacinia arcu. Integer erat enim, commodo eget viverra sit amet, porta et quam. Aliquam in fermentum risus, ut bibendum purus. Integer at nunc neque. Vivamus volutpat leo in tortor laoreet, sit amet tincidunt tellus semper.
  </p>
</div>

But to stay the way you want, you’ll have to change the color of the image to green.