How to present user text with new lines inside a div

Question

I have a bootstrap panel that contains text that was previously inserted by the user. The user text may contain new lines.

What's the best way do display those new lines? I've found this answer and it works if I put a <p> element inside the div. Another answer seems impossible since it would require text replacing, that may be problematic.

Is this the best approach? Will it work on major browsers?

score 0 · Answer 1 · answered Oct 21 '15 at 21:51

0

I think you can try use <pre> HTML-tag. In this case new-lines will be displayed as is

answered Oct 21 '15 at 21:51

ZFTurbo

3,652
3
22
27

score 0 · Answer 2 · answered Oct 21 '15 at 22:35

0

jQuery solution that might work

$(document).ready(function() {
  $.each($('.panel-body'), function(k, panel_body) {
    $(panel_body).html($(panel_body).text().replace(new RegExp('\r?\n','g'), '<br />'));
  });
});

answered Oct 21 '15 at 22:35

Waren Inber

38
7

I was trying to avoid text replacement, cause I'm pretty sure that some edge case will be broken with such approach – pedrorijo91 Oct 21 '15 at 22:36

score 0 · Accepted Answer · answered Oct 24 '15 at 10:43

0

my solution was:

<p style="white-space: pre">user-text</p>

it seems to be working correctly

answered Oct 24 '15 at 10:43

pedrorijo91

7,635
9
44
82

How to present user text with new lines inside a div

3 Answers3