软连字符
您可以通过插入软连字符(
­)来告诉浏览器在哪里拆分长字:
averyvery­longword
可能呈现为
veryverylongword
要么
每个
字
一个好的正则表达式可以确保除非必要,否则您不会插入它们:
/([^s-]{5})([^s-]{5})/ → $1­$2浏览器和搜索引擎足够聪明,可以在搜索文本时忽略该字符,而Chrome和Firefox(尚未测试其他字符)在将文本复制到剪贴板时会忽略该字符。
<wbr>
元件
另一个选择是注入
<wbr>,它是以前的IE-ism,现在是HTML5:
averyvery<wbr>longword
无连字符:
每个
长字
您可以使用零宽度的空格字符
​(或
​)来实现相同的目的。
仅供参考,最新的IE,Firefox和Safari(但当前不支持Chrome)也支持CSS
hyphens:auto
div.breaking { hyphens: auto;}但是,连字基于连字字典,因此不能保证打破长字。但是,它可以使有道理的文本更漂亮。
复古抱怨解决方案
<table>布局不好,但
display:table在其他元素上很好。它会像老式桌子一样古怪(又富有弹性):
div.breaking { display: table-cell;}overflow和
white-space: pre-wrap下面的答案也很好。



