While developing a friends list script for a website, I encountered an interesting UI issue in the chat section. When a lengthy chat message is added to the chat content div with the CSS attribute overflow: scroll, it causes the div to stretch out horizontally like this:
https://i.stack.imgur.com/5DAMB.png
To prevent this from happening, I want to ensure that the <p> tags within the content div wrap to the next line when they exceed the width of the content div. Currently, my CSS code looks like this:
#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;
}
Is there a way to achieve this without compromising the scrollability of the chat content div? I want to avoid horizontal extension when a message contains very long words.