Содержите текст p в div горизонтально

Question

Я создал сценарий списка друзей для сайта и заметил некоторые забавные проблемы с пользовательским интерфейсом в разделе чата. Когда сообщение чата тот очень долго будет добавлено в DIV содержимого чата, который имеет атрибут overflow: scroll, он растягивает его по горизонтали, как это:

мне нужно сделать так, чтобы <p> тегов внутри контента div wrap to next line, если они более широкие, чем div div, поэтому этого не происходит. Мой css сейчас выглядит так:

#chatContentDiv { 
    height: 70%; 
    width: 100%; 
    overflow: scroll; 
    background: rgba(0, 0, 75, 0.3); 
    text-align: left; 
} 

#chatContentDiv p { 
    font-size: medium; 
    width: 100%; 
    padding: 10px; 
    margin: 0; 
} 

Есть ли способ достичь этого? Мне нужно, чтобы он все еще прокручивался вверх и вниз, но не может растягиваться, если сообщение содержит очень длинное слово.

Answer 1

Попробуйте это ...

Используйте word-wrap свойство нарушать слово, если оно шире, чем обертки

#chatContentDiv p { 
    font-size: medium; 
    width: 100%; 
    word-wrap: break-word; 
    padding: 10px; 
    margin: 0; 
}