Is there a way to prevent long words in the <p> tag from breaking awkwardly in the browser? I attempted to use the CSS property word-break: break-all;, but it seems that Firefox and Opera do not support this feature. Additionally, normal words are also being broken up. Is there a solution to only break very long words based on the width of the containing <div> element?
body {
background-color: #ccc;
}
h2 {
float: left;
color: #525254;
margin: 0px;
font: bold 15px Arial, Helvetica, sans;
}
.post {
background-color: #fff;
float: left;
clear: both;
padding: 20px;
width: 500px;
border-bottom: solid 1px #ddd;
}
.post_cell {
display: table-cell;
vertical-align: middle;
}
.post_body {
display: table-cell;
width: 400px;
opacity: 0.8;
}
.profile_img {
border: solid 3px #ccc;
width: 48px;
height: 48px;
margin: 0px 15px;
}
.post_info {
color: #c3c3c3;
font: normal 12px Arial, Helvetica, sans;
margin-left: 8px;
}
a.no_style {
color: inherit;
text-decoration: inherit;
font: inherit;
}
p {
float: left;
clear: both;
color: #525254;
margin: 0px;
padding: 0px;
line-height: 18px;
font: normal 15px Arial, Helvetica, sans;
word-wrap: break-word;
}<div class="post">
<div class="post_cell">
<input type="checkbox" />
</div>
<div class="post_cell">
<img class="profile_img" src="" height="48">
</div>
<div class="post_body">
<div class="post_details">
<h2>
<a href="javascript:void(0)" target="_blank" class="no_style">user</a>
</h2>
<span class="post_info">
<span class="passed_time">15 hours ago</span> |
<a href="javascript:void(0)" class="no_style">3 Comments</a>
</span>
</div>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
</div>You can check out this for more: http://jsfiddle.net/Le4zK/16/