软连字符

您可以通过插入软连字符（­）来告诉浏览器在哪里拆分长字：

averyvery­longword

可能呈现为

veryverylongword

要么

每个
字

一个好的正则表达式可以确保除非必要，否则您不会插入它们：

/([^\s-]{5})([^\s-]{5})/ → $1­$2

浏览器和搜索引擎足够聪明，可以在搜索文本时忽略该字符，而Chrome和Firefox（尚未测试其他字符）在将文本复制到剪贴板时会忽略该字符。

<wbr> 元件

另一个选择是注入<wbr>，它是以前的IE-ism，现在是HTML5：

averyvery<wbr>longword

无连字符：

每个
长字

您可以使用零宽度的空格字符​（或&#x200B）来实现相同的目的。

仅供参考，最新的IE，Firefox和Safari（但当前不支持Chrome）也支持CSShyphens:auto

div.breaking {
  hyphens: auto;
}

但是，连字基于连字字典，因此不能保证打破长字。但是，它可以使有道理的文本更漂亮。

复古抱怨解决方案

<table>布局不好，但display:table在其他元素上很好。它会像老式桌子一样古怪（又富有弹性）：

div.breaking {
   display: table-cell;
}

overflow和white-space: pre-wrap下面的答案也很好。