表格单元格自动换行不能使用斜杠
提问于 2013-04-29 11:42:06
我试图以固定的布局对文本进行换行，但当文本中包含斜杠时，它不起作用。
这个问题可以在不插入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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-04-29 11:47:39
将表格添加到“table-layout:fixed;”div-element中，并为单元格分配一个宽度，使其换行：
Stack Overflow用户
发布于 2013-04-29 13:02:00
在每次出现应视为允许直接换行的斜杠或其他字符之后，插入<wbr>标签或零宽度空格​。在这些替代方案之间的选择有点complicated，但由于您的代码已经无法在旧版本的IE上工作，您不妨在这里忽略它们，这将使​成为正确的选择。也就是说，你可以写成例如：
abfdbfdbfdb/​dfbfdbdfbfbf/​bdffbdbfdfbddfbdfbdfb问题出在角色层面，而不是风格问题。
不包含空格字符的字符串在换行中通常是不可分的，应该是这样的，除非您可以可靠地使浏览器在可接受的断点处中断，或者正确地使用连字符并使用分词。像word-wrap: break-word这样的设置是为异常情况而设计的，当没有好的方法控制包装并且需要避免溢出时，会出现紧急中断。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16277805
复制
腾讯云开发者
