table-cell word-wrap not working with slashes

问题

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>

回答1:

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

JSFiddle

回答2:

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 e.g.

abfdbfdbfdb/&#x200b;dfbfdbdfbfbf/&#x200b;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.

来源：https://stackoverflow.com/questions/16277805/table-cell-word-wrap-not-working-with-slashes

标签

html

css

word-wrap