CSS Overflow whitespace text - css

Question

Basically I am trying out CSS trying to create a chat box for some reason when I float:right the chat message it goes out of the chat box but I when I float:left it works fine as it should be here is the JS Fiddle which shows the problem!
https://jsfiddle.net/g8ax21aa/
a {
text-decoration: none;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
h4,
h5 {
line-height: 3.0em;
margin: 0;
}
hr {
background: #e9e9e9;
border: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 1px;
margin: 0;
min-height: 1px;
}
img {
border: 0;
display: block;
height: auto;
max-width: 100%;
}
input {
border: 0;
color: inherit;
font-family: inherit;
font-size: 100%;
line-height: normal;
margin: 0;
}
.clearfix {
*zoom: 1;
}
/* For IE 6/7 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ---------- LIVE-CHAT ---------- */
#live-chat {
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
bottom: 0;
font-size: 12px;
right: 24px;
position: fixed;
width: 300px;
}
#live-chat header {
background: #293239;
border-radius: 5px 5px 0 0;
color: #fff;
cursor: pointer;
padding: 16px 24px;
}
#live-chat h4:before {
background: #1a8a34;
border-radius: 50%;
content: "";
display: inline-block;
height: 8px;
margin: 0 8px 0 0;
width: 8px;
}
#live-chat h4 {
font-size: 12px;
}
#live-chat h5 {
font-size: 10px;
}
#live-chat form {
padding: 24px;
}
#live-chat input[type="text"] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 8px;
outline: none;
width: 234px;
}
.chat-message-counter {
background: #e62727;
border: 1px solid #fff;
border-radius: 50%;
display: none;
font-size: 12px;
font-weight: bold;
height: 28px;
left: 0;
line-height: 28px;
margin: -15px 0 0 -15px;
position: absolute;
text-align: center;
top: 0;
width: 28px;
}
.chat-close {
background: #1b2126;
border-radius: 50%;
color: #fff;
display: block;
float: right;
font-size: 10px;
height: 16px;
line-height: 16px;
margin: 2px 0 0 0;
text-align: center;
width: 16px;
}
.chat {
background: #fff;
}
.chat-history {
height: 252px;
padding: 8px 24px;
overflow-y: scroll;
}
.chat-message {
margin: 16px 0;
}
.chat-message img {
border-radius: 50%;
float: left;
}
.chat-time {
float: right;
font-size: 10px;
}
.user {
color: #fff;
background-color: #4080ff;
clear: right;
float: right;
}
.server {
background-color: #f1f0f0;
color: #4b4f56;
margin-left: 15px;
clear: left;
float: left;
}
.msg {
overflow-wrap: inherit;
text-shadow: none;
overflow: hidden;
border-radius: 5px;
padding: 5px 8px 6px;
border: 1px solid #d2d6de;
}
<div id="live-chat">
<header class="clearfix">
x
<h4>LOG</h4>
</header>
<div class="chat">
<div class="chat-history">
<div class="chat-message clearfix">
<div class="chat-message-content clearfix">
<span class="chat-time">13:35</span>
<span class="msg user">aslkdsakdhsalkdsakldhsalkdhklashdklsahdklhsakldhklashkldaskdlkklsaskldklsad!.</span>
</div>
</div>
<hr>
<div class="chat-message clearfix">
<img src="./imgs/u1.png" alt="" width="32" height="32">
<div class="chat-message-content clearfix">
<span class="chat-time">13:37</span>
<h5>UROA</h5>
<span class="msg server">HIasklhdlksahdklsahdklashdlkhadlkahkdhlsahdhkalkdhsahldkahlkdlkaslkdhkaskhldkla!</span>
</div>
</div>
<hr>
</div>
<form id="chat_form">
<fieldset>
<input type="text" placeholder="Type your message…" autofocus>
<input type="hidden">
</fieldset>
</form>
</div>
</div>
Thank you for your time and help.

Answer 1

.msg {
word-break: break-all;
}
seems to be the way to go. MDN.
PS. It turns out that break-word is an unofficial value for word-break property and it should be break-all. From caniuse:
Partial support (CSS3 word-break property) refers to supporting the break-all value, but not the keep-all value. Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.
So, you are better off using word-break: break-all;

Answer 2

See my code below. I added word-break: break-word;
and it works fine.
a {
text-decoration: none;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
h4,
h5 {
line-height: 3.0em;
margin: 0;
}
hr {
background: #e9e9e9;
border: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 1px;
margin: 0;
min-height: 1px;
}
img {
border: 0;
display: block;
height: auto;
max-width: 100%;
}
input {
border: 0;
color: inherit;
font-family: inherit;
font-size: 100%;
line-height: normal;
margin: 0;
}
.clearfix {
*zoom: 1;
}
/* For IE 6/7 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ---------- LIVE-CHAT ---------- */
#live-chat {
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
bottom: 0;
font-size: 12px;
right: 24px;
position: fixed;
width: 300px;
}
#live-chat header {
background: #293239;
border-radius: 5px 5px 0 0;
color: #fff;
cursor: pointer;
padding: 16px 24px;
}
#live-chat h4:before {
background: #1a8a34;
border-radius: 50%;
content: "";
display: inline-block;
height: 8px;
margin: 0 8px 0 0;
width: 8px;
}
#live-chat h4 {
font-size: 12px;
}
#live-chat h5 {
font-size: 10px;
}
#live-chat form {
padding: 24px;
}
#live-chat input[type="text"] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 8px;
outline: none;
width: 234px;
}
.chat-message-counter {
background: #e62727;
border: 1px solid #fff;
border-radius: 50%;
display: none;
font-size: 12px;
font-weight: bold;
height: 28px;
left: 0;
line-height: 28px;
margin: -15px 0 0 -15px;
position: absolute;
text-align: center;
top: 0;
width: 28px;
}
.chat-close {
background: #1b2126;
border-radius: 50%;
color: #fff;
display: block;
float: right;
font-size: 10px;
height: 16px;
line-height: 16px;
margin: 2px 0 0 0;
text-align: center;
width: 16px;
}
.chat {
background: #fff;
}
.chat-history {
height: 252px;
padding: 8px 24px;
overflow-y: scroll;
}
.chat-message {
margin: 16px 0;
word-break: break-word;
}
.chat-message img {
border-radius: 50%;
float: left;
}
.chat-time {
float: right;
font-size: 10px;
}
.user {
color: #fff;
background-color: #4080ff;
clear: right;
float: right;
}
.server {
background-color: #f1f0f0;
color: #4b4f56;
margin-left: 15px;
clear: left;
float: left;
}
.msg {
overflow-wrap: inherit;
text-shadow: none;
overflow: hidden;
border-radius: 5px;
padding: 5px 8px 6px;
border: 1px solid #d2d6de;
}
<div id="live-chat">
<header class="clearfix">
x
<h4>LOG</h4>
</header>
<div class="chat">
<div class="chat-history">
<div class="chat-message clearfix">
<div class="chat-message-content clearfix">
<span class="chat-time">13:35</span>
<span class="msg user">aslkdsakdhsalkdsakldhsalkdhklashdklsahdklhsakldhklashkldaskdlkklsaskldklsad!.</span>
</div>
</div>
<hr>
<div class="chat-message clearfix">
<img src="./imgs/u1.png" alt="" width="32" height="32">
<div class="chat-message-content clearfix">
<span class="chat-time">13:37</span>
<h5>UROA</h5>
<span class="msg server">HIasklhdlksahdklsahdklashdlkhadlkahkdhlsahdhkalkdhsahldkahlkdlkaslkdhkaskhldkla!</span>
</div>
</div>
<hr>
</div>
<form id="chat_form">
<fieldset>
<input type="text" placeholder="Type your message…" autofocus>
<input type="hidden">
</fieldset>
</form>
</div>
</div>

Answer 3

you must use
.msg {
width:256px; // add this
word-wrap:break-word;// add this
...//your code
}
Demo in jsfiddle

Answer 4

The problem is that in real life there are no words with that size of characters
try this:
width: 100%;
text-overflow: ellipsis;