我试图将文本包装在固定布局中,但当文本包含斜杠时它不起作用。
可以在不插入 Javascript(纯 CSS)空格的情况下解决这个问题吗?
jsfiddle:
http://jsfiddle.net/HgBhk/1/ 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>
插入一个<wbr>
标签或零宽度空格​
每次出现斜杠或其他字符后,应将其视为允许在其后直接换行。这些替代品之间的选择有点复杂的 http://www.cs.tut.fi/~jkorpela/html/nobr.html,但是由于您的代码已经无法在旧版本的 IE 上运行,您也可以在这里忽略它们,这将使​
正确的选择。也就是说,你会写例如
abfdbfdbfdb/​dfbfdbdfbfbf/​bdffbdbfdfbddfbdfbdfb
问题出在角色层面,而不是造型问题。
不包含空白字符的字符串通常在换行中是不可分割的,并且应该如此,除非您能够可靠地使浏览器在可接受的断点处中断或正确连字符并使用分词。像这样的设置word-wrap: break-word http://www.w3.org/TR/css3-text/#overflow-wrap适用于特殊情况、紧急中断时没有好的方法来控制包装并且需要避免溢出。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)