Javascript 将文本保持在div中：包括换行符、空格和长单词

假设我有以下字符串：

"This line should always break on newline \n, spaces if it is about to overflow and veryLongLinksThatDoNotFitInsideTheDiv"

我想让它打开：

• \n（始终）
• 空白（如果即将溢出）
• 长单词（如果它不适合整行）
• 但最好不要写下一行（）

基于此，我尝试：

    <div id="log" style="word-break: break-all"></div>
    <!-- <div id="log" style="word-wrap: break-word"></div> -->
    <!-- <div id="log" style="white-space: pre-line"></div> -->
    <!-- <div id="log" style="white-space: pre; word-break: break-all"></div> -->

但我无法满足所有3（或4）个标准

小提琴：你可以用

<div id="log" style="overflow-wrap: break-word;white-space: pre-wrap;"></div>

或

我认为您的答案在于将“\n”替换为“
”。HTML无法识别新行字符-它需要
标记。

Amit，感谢您的回复。不幸的是，至少在我的小提琴中，建议的解决方案没有处理换行符“\n”。它确实满足其他要求。@ThomasHubregtsen:若要确认，请同时放置两个\n。你应该看到额外的断线。谢谢你拉玛·施耐德。但是，“空白：前置行”不接受\n作为新行。不幸的是，在这种情况下，断字不起作用。（我也把它放在小提琴里展示）。如果可能，我不想更改服务器发送的内容/在javascript中对我的数据执行替换。

<div id="log" style="word-wrap: break-word;word-break: normal;white-space: pre-wrap;"></div>