给定一个相对简单的CSS：

div {
  width: 150px;
}

<div>
  12333-2333-233-23339392-332332323
</div>

如何使字符串保持在150的"宽度"范围内，并简单地在连字符上换行？

解决方案：

以此替换连字符：

­

它称为"软"连字符。

div {
  width: 150px;
}

<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

作为CSS3的一部分，尚不完全支持它，但是我们可以在此处找到有关自动换行的信息。另一个选择是wbr标记，两个都不支持。

示例在Google Chrome，Safari(Windows)和IE8中可以正常工作。文本在Firefox 3和Opera 9.5中突破了150px框。

另外``不适用于示例，因为它会：

• 断字时有效，但不断字时不显示任何连字符，或者
• 不断字时工作，但断字时显示两个连字符，因为它会在断点处添加连字符。

在此特定实例中(字符串将包含连字符)，我将文本转换到此服务器端：

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>

根据我们想确切看到的内容，可以结合使用"连字符"，"软连字符"和/或者"零宽度空间"。

在软连字符上，浏览器可以断字(添加连字符)。
在零宽度的空间上，浏览器可以断字(不添加任何内容)。

因此，如果代码是这样的：

111111222222-333333444444-555555

那么浏览器将显示此内容，且不会出现断字？：

1111112222222-33333334444444-5555555

这会打破所有可能的单词吗？：

111111-

  222222-

  -333333

  444444-

  555555

只需选择我们需要的选项即可。在情况下，可能是4s和5s之间的那一个。