html - 为什么textareas超过宽度会打断长字(为什么div不会打断长字)？

假设我有两个框：div.box和textarea.box，每个框都有相同的固定宽度和高度。每一个都有相同的文本，包括一个verrryyyyy长单词，后面跟着一系列短单词。
安装程序可能如下所示：
CSS:

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

HTML格式：

<div class="box">
looooooooooooooooooooooooooooooooooooooooooooooooooooooooong_word and short text
</div>

<br><br>

<textarea class="box">
looooooooooooooooooooooooooooooooooooooooooooooooooooooooong_word and short text
</textarea>

使用上述代码，div不会打断长单词，然后在下一行以一系列短单词开始：
然而，textarea打破了这个长单词：
我的问题：为什么会这样？什么默认css导致div将长单词放在一行（即不打断单词），而textarea将其打断？
JS Fiddle Example。

最佳答案

Chrome默认文本区域样式：

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

word-wrap: break-word;是原因。
overflow属性只能隐藏溢出的内容或允许滚动它。使用word-wrap: break-word;允许长单词被打断。