Line breaks in html

1

I have a common form that sends data to firebase. In textarea text is written, we know that with the enter key, line breaks are generated.

By sending this information in firebase it is saved as a string but ...

By showing them in p those line breaks, I tried with pre and the line breaks are generated but they leave their containers

This is what I tried

<div style="background:red">
  <p>
    Lorem ipsum dolor sit amet consectetur adipiscing elit praesent nibh in condimentum risus, vehicula mus pretium facilisi tortor mi facilisis sapien mollis odio blandit ridiculus, accumsan enim per egestas fringilla montes maecenas hac purus integer arcu.
    Placerat magnis maecenas dictum sapien eros congue, ligula ullamcorper mollis sagittis vehicula, aliquam sociis luctus lobortis nisi. |Eu ante pharetra tellus maecenas tincidunt ultrices inceptos quis vestibulum porta consequat congue, eros rhoncus
    magnis justo potenti aliquam neque mus curabitur sem.
  </p>
</div>

<div style="background:red">
  <pre>
    Lorem ipsum dolor sit amet consectetur adipiscing elit praesent nibh in condimentum risus, vehicula mus pretium facilisi tortor mi facilisis sapien mollis odio blandit ridiculus, accumsan enim per egestas fringilla montes maecenas hac purus integer arcu.
    
    Placerat magnis maecenas dictum sapien eros congue, ligula ullamcorper mollis sagittis vehicula, aliquam sociis luctus lobortis nisi. |Eu ante pharetra tellus maecenas tincidunt ultrices inceptos quis vestibulum porta consequat congue, eros rhoncus
    
    magnis justo potenti aliquam neque mus curabitur sem.
  </pre>
</div>

Does anyone have any idea how to show the line breaks?

    
asked by Emiliano Pamont 27.08.2018 в 00:10
source

2 answers

1

In javascript it is str = str.replace(/(?:\r\n|\r|\n)/g, '<br>'); if you put your code we integrate it and it is already in response to future users

For example:

str = "Lorem ipsum dolor sit amet consectetur adipiscing elit praesent nibh in condimentum risus, vehicula mus pretium facilisi tortor mi facilisis sapien mollis odio blandit ridiculus, accumsan enim per egestas fringilla montes maecenas hac purus integer arcu.\nPlacerat magnis maecenas dictum sapien eros congue, ligula ullamcorper mollis sagittis vehicula, aliquam sociis luctus lobortis nisi. \r\nEu ante pharetra tellus maecenas tincidunt ultrices inceptos quis vestibulum porta consequat congue, eros rhoncus\nmagnis justo potenti aliquam neque mus curabitur sem.";

document.getElementById('sinreemplazar').innerHTML = str;

str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');

document.getElementById('conreemplazo').innerHTML = str;
<p id="sinreemplazar">

</p>

<p id="conreemplazo">

</p>

ref: link

    
answered by 27.08.2018 / 01:14
source
0

<div style="background:red">
  <p>
    Lorem ipsum dolor sit amet consectetur adipiscing elit praesent nibh in condimentum risus, vehicula mus pretium facilisi tortor mi facilisis sapien mollis odio blandit ridiculus, accumsan enim per egestas fringilla montes maecenas hac purus integer arcu.<br/>
    Placerat magnis maecenas dictum sapien eros congue, ligula ullamcorper mollis sagittis vehicula, aliquam sociis luctus lobortis nisi.<br />|Eu ante pharetra tellus maecenas tincidunt ultrices inceptos quis vestibulum porta consequat congue, eros rhoncus
    magnis justo potenti aliquam neque mus curabitur sem.
  </p>
</div>

<div style="background:red">
  <pre>
    Lorem ipsum dolor sit amet consectetur adipiscing elit praesent nibh in condimentum risus, vehicula mus pretium facilisi tortor mi facilisis sapien mollis odio blandit ridiculus, accumsan enim per egestas fringilla montes maecenas hac purus integer arcu.
    
    Placerat magnis maecenas dictum sapien eros congue, ligula ullamcorper mollis sagittis vehicula, aliquam sociis luctus lobortis nisi. |Eu ante pharetra tellus maecenas tincidunt ultrices inceptos quis vestibulum porta consequat congue, eros rhoncus
    
    magnis justo potenti aliquam neque mus curabitur sem.
  </pre>
</div>

Just add <br />

    
answered by 27.08.2018 в 00:23