word-wrap:break-word in 100% table-cell

Question

JSFiddle: http://jsfiddle.net/nw4dF/
So, why in my table-cell #c, the css rule word-wrap:break-word is ignored and cause the elongation of the table in case of overflow? I don't want use word-break: break-all; , how to solve?

Answer 1

Use word-break instead of word-wrap for webkit + opera and hypehns for moz and IE10+ (you need a lang attribute declared). For earlier versions of IE you'll just have to use word-break: break-all .

JSFiddle

HTML

<div id="a" lang="en">
    ...
</div>

CSS

#c {
    *word-break: break-all;
     word-break: break-word;

    -moz-hyphens: auto;
     -ms-hyphens: auto;
         hyphens: auto;
}

Answer 2

try this - jsfiddle.net/nw4dF/1/

or you could change table syntax on div or something more flexible