为什么textareas在超过宽度时会打破冗长的单词（为什么不打破长单词）？

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不破长词，然后开始o n，其中的一系列简短的话下一行：

然而，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属性（http://www.w3.org/TR/css3-text/#overflow-wrap）。

你想应用自动换行：断字;到元素。

Answer 3

区别在于每个元素的word-wrap property的默认值。

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

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