Breaking words using CSS

Question

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>.

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/

Solution 1

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.

Solution 2

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.

Solution 3

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.

Comments

[Simone]

Maybe you need to set the container's width

[haynar]

but the <p> tag is block element as I know, but anyway I've tried to set display: block; it doesn't help. The <p> itself and it container too have some fixed width.

[haynar]

That wouldn't be the right solution, I don't want to hide a part of word

[haynar]

nice solution :) but I hope that would be possible to find a html/css solution

[Daniel T.]

Simone is right, you need to set the width on the <p> element for this to work.

[haynar]

when I'm removing the table-cell for .post_body than word-wrap is working fine, but the respective div is gonna lay under the image because of his default display: block and what about 580px, it's my mistake in JSFiddle, it should be something about 400px

[Hux]

I would remove the table-cell with floated containers, this will give better browser support. I'm not entirely sure why the width is ignored with table-cell.

[Jose Faeti]

Wasn't the OP asking for a css solution?

[haynar]

thanks :) I should fix the width of <p> I thought that I've done this :)

[haynar]

thanks for your solution :) I just has to add a width to <p>

[vise]

Except for some long urls, the input is probably bogus. I often do this when displaying user text in narrow regions such as sidebar widgets of my layout as a defensive approach.

[kontinuity]

Not sure why but Google Chrome has a undocumented property word-break: break-word;. You can see the autocomplete in action here goo.gl/PAktsq