为什么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打破了textarea ：

我的问题：为什么会这样？ 什么默认CSS导致div将长字保持在一行（即不破坏单词），但textarea打破它？

JS小提琴示例 。

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属性的默认值。

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

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

Answer 3

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

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