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/

Argos

I would like to know too. Once I saw this thing on Facebook Comments too. – Labret

Duplicate of https://mcmap.net/q/265877/-wordwrap-a-very-long-string and subsequently #320684. – Aretta

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

Cabalistic

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 – Taeniacide

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

Adkins

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

Wasn't the OP asking for a css solution? – Bainbridge

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

Quirk

Maybe you need to set the container's width – Quirk

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

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

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

Answer 4

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.

Marilyn

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 – Argos

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

Answer 5

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.

Bainbridge

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

Answer 6

I would use overflow-x: hidden on your parent container.

Eraste

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

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