将文本保持在 div 内：包括换行符、白色-space 和长字

Question

假设我有以下字符串：

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

我希望它在以下时间中断：

\n（总是）
空格（如果即将溢出）
长字（如果它不适合整行）
但最好不要放在可以放在下一行的随机小词上 ()

基于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 个）条件。

Fiddle: https://jsfiddle.net/6kq14cfc/

Answer 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>

Answer 2

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

将文本保持在 div 内：包括换行符、白色-space 和长字

Keeping text within div: Both newline, white-space and long words

html

javascript

overflow