Wrap Text like the latest Safari does with white-space: pre

Question

Safari does a wonderful job wrapping text when white-space: pre; is applied to <div>s or <textarea>s, like below.

<textarea style="width:300px; white-space:pre; word-wrap:break-word;"> text. dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</textarea>

When a word reaches the max-width of the textarea the entire word isn't moved down a line the way it is if you just use word-wrap: break-word;. Instead, it splits the word at the max-width and continues from the lower left newline. I'd like to be able to replicate this in all the major browsers, but I'd be satisfied with just Firefox and IE if it's too troublesome.

Any ideas/advice on how to achieve this would be much appreciated.

http://img15.imageshack.us/img15/2012/firefoxva.png http://img193.imageshack.us/img193/7020/safarik.png — Smith, Jul 28 '12 at 03:05

score 1 · Answer 1 · answered Jul 28 '12 at 11:01

1

Use overflow-wrap or word-wrap. They are synonyms, but from my experience, word-wrap works in most browsers:

textarea {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

This will insert hard breaks.

answered Jul 28 '12 at 11:01

fuxia

62,923
6
54
62

Here is more precision about differences between `word-wrap` and `overflow-wrap`: https://stackoverflow.com/a/17259958/2477545 – KmeCnin Jul 10 '17 at 22:39

score 1 · Answer 2 · answered Jan 07 '21 at 22:31

1

this worked for me

white-space: normal;
word-break: break-word;

answered Jan 07 '21 at 22:31

mohammad nazari

951
8
11

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – ppwater Jan 08 '21 at 08:19

Wrap Text like the latest Safari does with white-space: pre

2 Answers2