Принудительный разрыв строки в div

Question

У меня чат-диалог в div, но очень длинные слова выпадают. Мне посоветовали использовать i-frame, но как? Я думал, что это для внешних сайтов.

jsFiddle Code

CSS

.chat{ 
    width: 230px; 
    height: 310px; 
    margin-left: 10px; 
    background-color: grey; 
    border: solid 1px black; 
    color: #1855a3; 
    overflow-y: scroll; 
} 

Answer 1

попробовать добавить word-wrap:break-word; в вашем CSS

Answer 2

Добавьте правило CSS: word-break:break-word;

jsFiddle example

Answer 3

Использование word-wrap: break-word; - работает во всех браузерах.

http://jsfiddle.net/adamh/TWsqQ/5/

Answer 4

То, что я считаю, что вы пытаетесь сделать, это предотвратить горизонтальную прокрутку.

Вы можете легко сделать это с помощью overflow-x: hidden; и word-wrap: break-word;, чтобы длинные слова переломились в новую строку.

CSS:

.chat{ 
    width: 230px; 
    height: 310px; 
    margin-left: 10px; 
    background-color: grey; 
    border: solid 1px black; 
    color: #1855a3; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    word-wrap: break-word; 
} 

Смотрите пример здесь: http://jsfiddle.net/TWsqQ/10/