Почему текстовые объявления ломают длинные слова (и почему бы не разрывать длинные слова), когда они превышают ширину?

Question

Предположим, у меня есть две коробки: div.box и textarea.box, каждая из которых имеет ту же фиксированную ширину и высоту. Каждый из них также имеет идентичный текст, включающий один врррыййый длинное слово, за которым следует серия коротких слов.

Установка может выглядеть следующим образом:

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 п следующая строка с серией коротких слов:

Однако 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).

Вы хотите применить word-wrap: break-word; к элементу.

Answer 3

Разница в значении по умолчанию word-wrap property каждого элемента.

По умолчанию родной таблицы стилей браузера применяется word-wrap:normal к div элемента, в то время как на textarea элемент это относится word-wrap:break-word.

Другими словами, для элементов div браузер предполагает, что если текст переполняет указанные размеры, целые слова не могут быть разбиты, чтобы соответствовать контейнеру, тогда как для элементов textarea предполагается, что нарушение слова приемлемо. Эта разница становится очевидной, когда (как в этом случае) переполнение не подавляется.