Angular:如何同时换行和换行一个长div字符串

Question

我有一个Ionic/Angular应用程序，我在其中读取日志文件，其中每条消息由换行符分隔(例如，适用于Windows的rn(

我在StackBlitz 上有一个简单的例子

我想做的是

1。换行对于视图宽度而言太长的任何字符串AND

2.中断

要执行1，我可以使用(在app.component.css中(

#messages {   
word-wrap: break-word;
}

要执行2我可以使用

#messages {   
white-space: pre;
}

但是，他们不合作。如果我有

#messages {   
white-space: pre;
word-wrap: break-word;
}

我不懂单词包装。

我尝试使用<br>而不是换行(我可以用<br>以编程方式更改换行，但这也不起作用(它只显示<br>(

有没有什么方法既可以换行又可以换行？

Answer 1

使用innerHTML来防止显示原始<br>标记。

<div id='messages' [innerHTML]=messages></div>

Answer 2

使用white-space: pre-wrap或white-space: pre-line，它将按预期工作。

pre-wrap

保留空白序列。换行符处、<br>处以及填充行框所需的换行符处都会换行。

pre-line

空白序列被折叠。换行符处、<br>处以及填充行框所需的换行符处都会换行。

所以

#messages {   
white-space: pre-wrap;
}