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.

Answer 1

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.`;