table-cell word-wrap not working with slashes

Question

I am trying to wrap text in a fixed layout but it doesn't work when the text contains slashes.

Can this be fixed without inserting spaces from Javascript (pure CSS)?

jsfiddle:

http://jsfiddle.net/HgBhk/1/

Not working:
<div style="display:table; width:170px; background-color:cyan;">
    <div style="display:table-row">
        <div style="display:table-cell;word-wrap: break-word;">abfdbfdbfdb/dfbfdbdfbfbf/bdffbdbfdfbddfbdfbdfb</div>
        <div style="display:table-cell; width:34px;  background-color:red;">xxxxx</div>        
    </div>
</div>

</br>
Working:
<div style="display:table; width:170px; background-color:cyan;">
    <div style="display:table-row">
        <div style="display:table-cell;word-wrap: break-word;">abfdbfdbfdb dfbfdbdfbfbf bdffbdbfdfbddfbdfbdfb</div>
        <div style="display:table-cell; width:34px;  background-color:red;">xxxxx</div>        
    </div>
</div>

Answer 1

Insert either a <wbr> tag or a zero-width space ​ after each occurrence of a slash or other character that should be treated as allowing direct line break after it. The choice between these alternatives is a bit complicated , but since your code already fails to work on old versions of IE, you might just as well ignore them here too, and this would make ​ the right choice. That is, you would write eg

abfdbfdbfdb/​dfbfdbdfbfbf/​bdffbdbfdfbddfbdfbdfb

The issue is at the character level, not a matter of styling.

A string containing no whitespace characters is normally indivisible in wrapping and should be that way, unless you can reliably make browsers either break at acceptable breaking points or hyphenate properly and use word division. A setting like word-wrap: break-word is meant for exceptional cases, emergency breaks when there is no good way to control wrapping and there is a need to avoid overflow.

Answer 2

Add table-layout:fixed; to the "table" div-element and assign a width to the cell to make it break lines:

JSFiddle