Why doesn't word-wrap work properly in CSS3?

Question

Why doesn\'t word wrap property work properly in the example below?

http://jsfiddle.net/k5VET/739/

What can I do to ensure that part of the word \'consectetur\'

Answer 1

Because the css word-wrap doesn't work in all browsers, use JavaScript instead! It should give the same result.

The function below requires JQuery and it will run each time window re-size.

The function checks if the element has more width then its parent, and if it has, it breaks all instead of words only. We don't want the children to grow bigger than it's parents, right?

I only needed it for tables, so if you want it in some other element, just change "table" to "#yourId" or ".yourClass". Make sure there is a parent-div or change "div" to "body" or something?

If it will go to else, it changes to word-break and then check if it should change back, that's why there is so much code.. :'/

$(window).on('resize',function() {
    $('table').each(function(){
        if($(this).width() > $(this).parent('div').width()){
            $(this).css('word-break', 'break-all');
        }
        else{
            $(this).css('word-break', 'break-word');
            if($(this).width() > $(this).parent('div').width()){
                $(this).css('word-break', 'break-all');
            }
        }
     });
}).trigger('resize');

I hope it works for you!

Answer 2

To break only long words I used word-break: break-word;. It seems to be deprecated for some reason, but it is the only thing that worked for me. What I need is to break only the words that where too long and needed to be broke.

Answer 3

Use word-break: break-all;

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
word-break: break-all;
    border:2px solid; }

LIVE DEMO

Answer 4

If word-wrap: break-all don't work, try also add this:

white-space:normal;

work for me with the .btn class in Bootstrap 3

Answer 5

This is useful for wrapping text in one line:

#fos {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

Answer 6

Okay so I know this is an old question but I seriously think there could be some useful clarification of when to use which property. Looking at the existing answers, I feel they offer solutions without explanation so here is my attempt to help with that. For context, by default, the container will not try to break a single long word up because it wants to preserve the word in it's original form.

With that said, 3 main ways to break up words there is overflow-wrap, word-break, and hypens. I won't dive too deep into hypens though.

So first off. I see word-wrap is being used in the question but reading the documentation, that is deprecated and some browsers have decided to simply alias it to overflow-wrap. It's probably preferred not to use that.

The distinction between the two properties is pretty clear in the documentation but for clarity, overflow-wrap really only has two possible values and will detect if a word has been overflowed. If it does, by default it moves the entire word to the next line. If break-word is set, it will only break up the word if the entire word couldn't be placed on that line.

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    overflow-wrap: break-word;
    border:2px solid; }
#sp { }

<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

You can see the pneumonoul... long word breaks exactly where it needs to on the next line after it attempts to separate the long word.

Now in contrast, we have word-break. This has more granular properties and actually also has a break-word option. This is synonymous to the above snippet so when to use one or the other I think is pretty trivial.

However, word-break also offers a break-all value which will break the word whenever possible to fit word where it was originally intended. It doesn't try to figure out if it needs the word to be on a new line or not -- it simply shoves the line break where it overflows. The biggest distinction here from the above is that long word we use is now still on the top.

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    word-break: break-all;
    border:2px solid; }
#sp { }

<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

And then finally for hyphens have their own special way of breaking up words. For more info take a look at the documentation. Also worth noting that different languages have different ways of breaking up words but fortunately the hyphens property hooks into the lang attribute and understands what to do.

Another option people have suggested is using the white-space property which attempts to break up text through spaces. In the example I used, this doesn't help our situation because the word itself is longer than the container. I think the important thing to note about this CSS property is that this doesn't attempt to break up words within themselves and rather tries to do it via spaces whenever appropriate.

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    white-space: normal;
    border:2px solid; }
#sp { }

<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

Hope this helps.