css - Angular：如何自动换行和换行一个长的 div 字符串

Question

我有一个 Ionic/Angular 应用程序，我在其中读取了一个日志文件，其中每条消息都由换行符分隔（例如\r\n，对于 Windows）

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

我想做的是

1.包装任何对于视图宽度来说太长的字符串和

2.在 \r\n 处休息

要做1，我可以使用（在 app.component.css 中）

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

要做2我可以使用

#messages {   
   white-space: pre;
}

但是，它们不能一起工作。如果我有

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

我没有得到自动换行。

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

有什么方法可以在换行时同时换行和换行？

标签： cssangular

Answer 1

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

pre-wrap

保留空白序列。在换行符处、在 处<br>和根据需要填充行框时会换行。

pre-line

空白序列被折叠。在换行符处、在 处<br>和根据需要填充行框时会换行。

所以

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