保持div内的文字：换行符，空格和长字

Question

Say I have the following string:

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

I want it to break on:

• The \\n (always)
• The white spaces (if it is about to overflow)
• The long word (if it does not fit on an entire single line)
• But preferably not on random small words that could fit on the next line ( How to limit break-all to only long words? )

Based on text flowing out of div , I tried:

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

But I can not get all 3 (nor 4) criteria met.

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

Answer 1

You can use

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

or

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

Answer 2

I think you're answer lies in replacing "\\n" with "<br />". HTML does not recognize new line characters - it needs the <br /> tag instead.