Css空白:预行未按预期工作

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应该插入
标签，相反，我得到了包括标签在内的完整消息。我已经尝试过\n和
，但似乎都不起作用。

Answer 1

您可以使用模板文字https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals在typescript中传递多行字符串。这将保留文本中的换行符，但需要用简单的换行符替换<br>标记。

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