Breaking words using CSS

Question

When the text in

tag is too long, it appears like this, how to prevent th

Answer 1

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

Answer 2

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 #ffffd;
    display:table;
}

Remove display:table-cell from .post_body css:

.post_body{
    width: 580px;
    opacity: 0.8;
}

Check if this example works for you.

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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.