html - 表格单元自动换行不适用于斜杠

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适用于特殊情况，当没有控制换行的好方法并且需要避免溢出时的紧急中断。

Answer 2

添加table-layout:fixed;到“table” div 元素并为单元格分配宽度以使其断线：

JSFiddle