When the text in <p>
tag is too long, it appears like this, how to prevent this with CSS? I've tried the CSS property word-break: break-all;
but Firefox and Opera doesn't support this property, and besides that other "normal" words also breaking. So I want to break only very long words, but not short words, depending on width of white <div>
.
You can check out this for more: http://jsfiddle.net/Le4zK/16/
Write this word-wrap: break-word;
instead of word-break: break-all;
EDIT :
Maybe this a bug with display:table
property. I did some changes in css:
Put display:table
in parent
div.
.post{
background-color: #fff;
float: left;
clear: both;
padding: 20px;
width: 500px;
border-bottom: solid 1px #ddd;
display:table;
}
Remove display:table-cell
from .post_body
css:
.post_body{
width: 580px;
opacity: 0.8;
}
Check if this example works for you.