将文本保留在 div 中：换行符、空格和长词答案

【问题标题】：Keeping text within div: Both newline, white-space and long words将文本保留在 div 中：换行符、空格和长词
【发布时间】：2017-08-31 19:20:31
【问题描述】：

假设我有以下字符串：

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

我希望它打破：

\n（总是）
空格（如果即将溢出）
长字（如果它不适合整行）
但最好不要使用可以放在下一行的随机小词 (How to limit break-all to only long words?)

基于text flowing out of div，我试过了：

    <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 个）标准。

小提琴：https://jsfiddle.net/6kq14cfc/

【问题讨论】：

标签： javascript html overflow

【解决方案1】：

你可以使用

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

或

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

【讨论】：

阿米特，感谢您的回复。不幸的是，至少在我的 Fiddle 中，建议的解决方案没有解决换行符“\n”。它确实满足其他要求。
@ThomasHubregtsen：要确认，请同时放置两个 \n。您应该会看到额外的换行符。

【解决方案2】：

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

【讨论】：

谢谢拉玛施耐德。但是，“white-space: pre-line”确实接受 \n 作为新行。不幸的是，break 这个词在这种情况下不起作用。（我也把它放在 Fiddle 中展示）。如果可能的话，我不想更改我的服务器发送的内容/在 javascript 中对我的数据执行替换。