Question

我正在尝试将文本包装在固定的布局中，但是当文本包含斜杠时它不起作用。

这可以在不插入Javascript（纯CSS）空格的情况下修复吗？

的jsfiddle：

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>标记或零宽度空格，该字符应被视为允许在其后直接换行。这些备选方案之间的选择有点complicated，但由于您的代码已经无法在旧版本的IE上运行，您也可以在这里忽略它们，这将使成为正确的选择。也就是说，你会写例如。

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

问题出在角色层面，而不是造型问题。

不包含空格字符的字符串在包装中通常是不可分割的，应该是这样的，除非你可以可靠地使浏览器在可接受的断点处断开或正确连字并使用分词。类似word-wrap: break-word的设置适用于特殊情况，当没有好的方法来控制包装时需要紧急中断，并且需要避免溢出。

Answer 2

将table-layout:fixed;添加到“table”div-element并为单元格指定宽度以使其断行：

JSFiddle

table-cell自动换行不使用斜杠

2 个答案: