Table-cell word-wrap does not work with slash

I am trying to wrap text in a fixed layout, but it does not 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>
+5
source share
2 answers

Add table-layout:fixed;a table to the div element and assign a width to the cell so that it breaks the rows:

Jsfiddle

0
source

<wbr> &#x200b; , . , IE, . , , .

abfdbfdbfdb/&#x200b;dfbfdbdfbfbf/&#x200b;bdffbdbfdfbddfbdfbdfb

, .

, , , , . , word-wrap: break-word, , , , .

+1

All Articles