Как принудительно сделать перенос строки в длинном слове в DIV?

Это может быть добавлено в принятый ответ для решения, подходящего для различных браузеров.

Источники:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.your_element {
    -ms-word-break: break-all; /* Для IE */
    word-break: break-all; /* Для остальных браузеров */

    /* Нестандартное решение для WebKit */
    word-break: break-word;

    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    -ms-hyphens: auto; 
    hyphens: auto; 
}

Этот CSS-код поможет предотвратить разрыв длинных слов и URL, обеспечивая корректное отображение текста в разных браузерах.

​ — это HTML-сущность для юникодного символа, называемого "нулевая ширина пробел" (zero-width space, ZWSP). Это невидимый символ, который указывает на возможность разрыва строки. Подобным образом, дефис служит для указания возможности разрыва строки в пределах границы слова.

Whitespace сохраняется браузером. Текст будет переходить на новую строку по мере необходимости и при разрывах строк.

Для того чтобы добиться такого поведения, вы можете использовать следующий CSS-код:

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

ДЕМО

Также можно применить эти стили к элементу <td>:

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

Пример HTML-кода:

<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

В этом примере, благодаря использованию white-space: pre-wrap; и word-break: break-word;, браузер будет сохранять пробелы в тексте и переносить строки по мере необходимости. Таким образом, длинные слова будут разрываться, если они превышают ширину контейнера.

Проблема с поддержкой flexbox в различных браузерах может быть сложной. Как я заметил, использование следующего CSS-кода работает во большинстве основных браузеров (Chrome, IE, Safari на iOS/OSX), кроме Firefox (v50.0.2), когда используется flexbox и width: auto.

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

Обратите внимание, что вам, возможно, потребуется добавить вендорные префиксы браузеров, если вы не используете автопрефиксер.

Также стоит учесть, что использование   для создания пробелов может привести к разрывам строк посреди слов. Это стоит избегать, чтобы избежать неожиданных результатов отображения текста.

В CSS свойство word-wrap: break-word; используется для управления тем, как обрываются длинные слова в пределах контейнера. Оно позволяет делить длинные слова на части, если они не помещаются в строку, и тем самым предотвращает переполнение контейнера.

Однако стоит отметить, что это свойство не является стандартом в CSS и его использование может варьироваться в зависимости от браузера. В тестах, проведенных на Firefox 3.6.3, word-wrap: break-word; работает корректно, то есть длинные слова действительно обрываются, что улучшает отображение текста и предотвращает горизонтальную прокрутку.

Для более современного решения стоит обратить внимание на свойство overflow-wrap: break-word;, которое является более универсальным и поддерживается практически всеми современными браузерами. Если вы хотите, чтобы ваш код оставался совместимым, рекомендуется использовать оба свойства:

.word-break-example {
    overflow-wrap: break-word;
    word-wrap: break-word; /* Для поддержки старых браузеров */
}

Таким образом, вы обеспечите корректное поведение в различных версиях браузеров.