CSS Message ul li span overflowing on x not y - html

Question

I've got an issue with my chat window, every long message overflows onto the x, and I'm trying to force it to over flow onto the height / y axis, I've tried adding overflow-x:none; and height:auto;, but doesnt seem to work.
This is what it looks like:http://www.socialnetwk.com/chatbug.png
Here is my code:
<style>
.chat-box {
position: relative;
overflow-x: none;
}
.header {
padding: 10px;
color: white;
font-size: 14px;
font-weight: bold;
background-color: #6d84b4;
}
.messages {
height: 80%;
overflow-x: none;
background-color: green;
background-color: rgb(237, 239, 244);
overflow-y: scroll;
}
.messages ul {
padding: 0px;
list-style-type: none;
overflow-x: none;
}
.messages ul li {
height: auto;
margin-bottom: 10px;
clear: both;
overflow-x: none;
padding-left: 10px;
padding-right: 10px;
}
.messages ul li span {
display: inline-block;
max-width: 200px;
background-color: white;
padding: 5px;
height:auto;
overflow-x: none;
border-radius: 4px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: grey;
}
.messages ul li span.received {
float: left;
}
.messages ul li span.received:after {
content:"";
display: inline-block;
position: absolute;
left: -8.5px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
}
.messages ul li span.received:before {
content:"";
display: inline-block;
position: absolute;
left: -9px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
}
.messages ul li span.sent:after {
content:"";
display: inline-block;
position: absolute;
right: -8px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #dbedfe;
}
.messages ul li span.sent:before {
content:"";
display: inline-block;
position: absolute;
right: -9px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid black;
}
.messages ul li span.sent {
float: right;
background-color: #dbedfe;
}
.clear {
clear: both;
}
.input-box {
background-color: white;
height: 50px;
padding: 0px;
}
.input-box textarea {
padding: 0px;
width: 278px;
height: 100%;
display: inline-block;
outline: 0px;
border-width: 0px;
resize: none;
border-width: 1px;
border-color: black;
border-style: solid;
font-size: 12px;
padding: 10px;
border-top-width: 0px;
}
.MsgInputHidden {
display:none;
visibility:hidden;
}
</style>
<div class="chat-box">
<div id="messages" class="messages message-window" friend_id="<?=$FriendName->id ?>">
<ul class="message">
<li>
<span class="sender">LongTextGoesInThisBoxLongTextGoesInThisBoxLongTextGoesInThisBox</span>
<li>
</ul>
</div>
</div>

Answer 1

Add this CSS property
.messages ul li span {
word-wrap: break-word;
}
<style>
.chat-box {
position: relative;
overflow-x: none;
}
.header {
padding: 10px;
color: white;
font-size: 14px;
font-weight: bold;
background-color: #6d84b4;
}
.messages {
height: 80%;
overflow-x: none;
background-color: green;
background-color: rgb(237, 239, 244);
overflow-y: scroll;
}
.messages ul {
padding: 0px;
list-style-type: none;
overflow-x: none;
}
.messages ul li {
height: auto;
margin-bottom: 10px;
clear: both;
overflow-x: none;
padding-left: 10px;
padding-right: 10px;
}
.messages ul li span {
display: inline-block;
max-width: 200px;
background-color: white;
padding: 5px;
height: auto;
overflow-x: none;
border-radius: 4px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: grey;
word-wrap: break-word;
}
.messages ul li span.received {
float: left;
}
.messages ul li span.received:after {
content: "";
display: inline-block;
position: absolute;
left: -8.5px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
}
.messages ul li span.received:before {
content: "";
display: inline-block;
position: absolute;
left: -9px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
}
.messages ul li span.sent:after {
content: "";
display: inline-block;
position: absolute;
right: -8px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #dbedfe;
}
.messages ul li span.sent:before {
content: "";
display: inline-block;
position: absolute;
right: -9px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid black;
}
.messages ul li span.sent {
float: right;
background-color: #dbedfe;
}
.clear {
clear: both;
}
.input-box {
background-color: white;
height: 50px;
padding: 0px;
}
.input-box textarea {
padding: 0px;
width: 278px;
height: 100%;
display: inline-block;
outline: 0px;
border-width: 0px;
resize: none;
border-width: 1px;
border-color: black;
border-style: solid;
font-size: 12px;
padding: 10px;
border-top-width: 0px;
}
.MsgInputHidden {
display: none;
visibility: hidden;
}
</style>
<body>
<div class="chat-box">
<div id="messages" class="messages message-window" friend_id="<?=$FriendName->id ?>">
<ul class="message">
<li>
<span class="sender">LongTextGoesInThisBoxLongTextGoesInThisBoxLongTextGoesInThisBox</span>
<li>
</ul>
</div>