Css white-space: pre-line not working as expected

Question

content: string;
this.content = "The system was unable to process your request.<br/>Please use your browser back button.";

.content{
 white-space: pre-line;
}

<div class="card-body text-center">
  <span class="content">
   {{ content }}
  </span>
</div>

pre-line is supposed to break in
tags, instead, I get the full message including the tag. I've already tried with \n and
but nothing seems to work.

Is the problem that you are seeing the `
` tag as part of the text? If so, css has nothing to do with it — Ted, Feb 21 '20 at 16:12
Are you using angular ? In that case you could pass as innerHTML to display html content. https://stackoverflow.com/questions/49013217/how-to-render-string-with-html-tags-in-angular-4 — vishnu sandhireddy, Feb 21 '20 at 16:14
pre-line Sequences of white space are collapsed. Lines are broken at newline characters, at
, and as necessary to fill line boxes. — Dinesh Iyngaran, Feb 21 '20 at 16:13
@Ted yes this is the problem, why do you say css has nothing to do with it? — A.Ashley, Feb 24 '20 at 08:07
@vishnusandhireddy Yes I am using Angular. In the post you linked they are saying that this is considered unsafe from angular. — A.Ashley, Feb 24 '20 at 08:15
@A.Ashley your trouble is in converting a `string` to `html` — Ted, Feb 24 '20 at 17:00
@A.Ashley Take a look at this question/answer: [Angular 5 How to insert a string as a HTML element](https://stackoverflow.com/questions/49832358/angular-5-how-to-insert-a-string-as-a-html-element) — Ted, Feb 24 '20 at 17:16

score 0 · Answer 1 · answered Aug 23 '22 at 18:40

You can use template literal https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals in your typescript to pass a multi-line string. This will keep the line breaks in the text but requires to replace the <br> tag with a simple line break.

this.content = `The system was unable to process your request.
Please use your browser back button.`;

1 Answers1