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!