Line breaks in HTML are '\n'

Question

Is there a way to get HTML to correctly handle n newlines? Or do I have to replace them with
?

<div class="text">
  abc
  def
  ghi
</div>

Answer 1

You can use the CSS white-space property to represent \n. You can also keep tabs as shown in \t.

For newlines\n:

white-space: pre-line;

For newlines \n and tabs \t:

white-space: pre-wrap;

document.getElementById('just-line-break').innerHTML = 'Testing 1\nTesting 2\n\tNo tab';

document.getElementById('line-break-and-tab').innerHTML = 'Testing 1\nTesting 2\n\tWith tab';

#just-line-break {
  white-space: pre-line;
}

#line-break-and-tab {
  white-space: pre-wrap;
}

<div id="just-line-break"></div>

<br/>

<div id="line-break-and-tab"></div>

Answer 2

This is to display line breaks and carriage returns in HTML. Then you don't need to do this explicitly. You can do this in CSS by setting the whitespace property pre-line value.

<span style="white-space: pre-line">@Model.CommentText</span>