html - Why do textareas break long words (and why don't divs break long words) when it exceeds the width? -

html - Why do textareas break long words (and why don't divs break long words) when it exceeds the width? -

let's have 2 boxes: div.box , textarea.box, each of has same fixed width , height. each has identical text including 1 verrryyyyy long word, followed series of short words.

the setup might this:

css:

.box { width: 400px; height: 100px; }

html:

<div class="box"> looooooooooooooooooooooooooooooooooooooooooooooooooooooooong_word , short text </div> <br><br> <textarea class="box"> looooooooooooooooooooooooooooooooooooooooooooooooooooooooong_word , short text </textarea>

using above code, div not break long word, begins on next line series of short words:

however, textarea breaks long word:

my question: why happen? default css causing div maintain long word on 1 line (i.e. not break word), textarea break it?

js fiddle example.

chrome default textarea styling:

textarea { -webkit-appearance: textarea; background-color: white; border: 1px solid; border-image: initial; -webkit-rtl-ordering: logical; -webkit-user-select: text; -webkit-box-orient: vertical; resize: auto; cursor: auto; padding: 2px; white-space: pre-wrap; word-wrap: break-word; }

the word-wrap: break-word; cause.

the overflow property can hide overflowing content or allow scrolled. utilize word-wrap: break-word; allow long words broken.

html css overflow word-wrap