table-cell自動換行不使用斜杠

Question

我試圖將文本包裝在固定的布局中，但當文本包含斜杠時它不起作用。

這可以修復而不從Javascript（純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

插入<wbr>標簽或零寬度空間​ 每次出現斜杠或其他字符后，應將其視為允許在其后直接換行。 這些替代方案之間的選擇有點復雜 ，但由於您的代碼已經無法在舊版本的IE上運行，您也可以在這里忽略它們，這將使​ 正確的選擇。 也就是說，你會寫例如

abfdbfdbfdb/​dfbfdbdfbfbf/​bdffbdbfdfbddfbdfbdfb

問題出在角色層面，而不是造型問題。

一個不包含空白字符的字符串通常在包裝中是不可分割的，應該是這樣的，除非你可以可靠地使瀏覽器在可接受的斷點處斷開或正確連字並使用分詞。 像word-wrap: break-word這樣的設置word-wrap: break-word意味着特殊情況，當沒有好的方法來控制包裝時需要緊急中斷，並且需要避免溢出。

Answer 2

添加table-layout:fixed; 到“table”div-element並為單元格指定寬度以使其斷行：

的jsfiddle