Как исправить выход текста за пределы элемента?

Question

[ma4t]

Привет, делаю что-то вроде диалогового окна. Есть форма с textarea и кнопкой, по нажатию на кнопку в окно выше добавляется "диалоговое сообщение" через append.
беру var guestText = $('textarea').val(); и добавляю $('.dialogue-window__msgs').children().children().last().children().first().text(guestText);

НО если ввести много символов, они выходят за пределы div как на скрине.
Хотя если пишешь это в html он делает перенос строки.
Ширина у дива с текстом задана как width: 75%;

Почему он не реагирует на ширину?

Comments

[Сослан Хлоев]

А есть живое демо?

Answer 1

[Владимир Проскурин]

Например
word-break: break-all;

Comments

[ma4t]

понял, спасибо

Answer 2

[Андрей Охотников]

Потому что все эти символы воспринимаются как 1 слово, по умолчанию браузер не разбивает слово на строки. Нужно в css задать свойство word-wrap

word-wrap: break-word;

Comments

[ma4t]

понял, спасибо