为什么textareas在超过宽度时会破坏长字（为什么div不会破坏长字）？

Question

假设我有两个方框：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

Answer 1

Chrome默认textarea样式：

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;可以删除长字。

Answer 2

差异在于每个元素的word-wrap property的默认值。

默认情况下，浏览器的原生样式表将word-wrap:normal应用于div元素，而应用textarea元素则应用word-wrap:break-word。

换句话说，对于div元素，浏览器假定如果文本溢出指定的维度，则不能破坏整个单词以适应容器，而对于textarea元素，它假定单词破坏是可以接受的。当（在这种情况下）溢出未被抑制时，这种差异变得非常明显。

Answer 3

因为那不是溢出的，所以你可能想看一下自动换行属性（http://www.w3.org/TR/css3-text/#overflow-wrap）。

你想应用自动换行：break-word;到元素。