Word breaking in html

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>

asked Sep 10, 2011 at 8:58

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.

Long ago I tried to solve this problem and I couldn’t find any css only cross-browser solution so I ended up inserting zero-width spaces ​ into long words using javascript:

var breakableLongWord = '';
for( var i = 0; i < longWord.length; i += 10 ) {
    if( i ) breakableLongWord += String.fromCharCode( 8203 );
    breakableLongWord += longWord.substr( i, 10 );
}

As I said it was long ago so you might be able to find a better solution with newer browser technologies.

answered Sep 10, 2011 at 9:35

The right property is word-wrap: break-word.

You can specify either normal or break-word value with the word-wrap property. normal means the text will extend the boundaries of the box. break-word means the text will wrap to next line.

word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.

answered Sep 10, 2011 at 9:11

In the JSFiddle here jsfiddle.net/Le4zK, your <p> is floated left. For starters, remove this. Also, .post_body has a display of table-cell. Remove this. Then you will see that the word-wrap is respected but your <p> is too big at 580px.

Try and avoid using the table-cell layouts where possible, as from the example given it isn’t particularly needed.

answered Sep 10, 2011 at 10:18

Check this solution.

The problem was the <p> tag length. Giving it a percentage width based on the parent with position set to relative seems to fix the issue. I also wrapped the content in another div.

The trick is to contain all the long element inside a parent div, since you are altering the display properties and using floating, this will keep the content flow normal for the elements inside the divs.

answered Sep 10, 2011 at 10:33

answered Sep 10, 2011 at 9:40