Breaking words using CSS

haynar picture haynar · Sep 10, 2011 · Viewed 17k times · Source

screenshot

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/

Answer

sandeep picture sandeep · Sep 10, 2011

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.