如何在连字符（-）等特殊字符后打断单词

给定一个相对简单的CSS：

div {
  width: 150px;
}

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

怎样让这个字符串停留约束到width 的150，和包装上的一个新的线连字符？

以此替换连字符：

­

它称为“软”连字符。

div {
  width: 150px;
}

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

在所有现代浏览器^*中（以及在某些较旧的浏览器中），该<wbr>元素是提供机会在特定点处打断长单词的完美工具。

引用该链接：

Word Break Opportunity（<wbr>）HTML元素表示文本在文本中的某个位置，浏览器可以选择在其中断开一行，尽管其换行规则不会在该位置产生断行。

这是在OP的示例中使用它的方式（或在JSFiddle上看到它的用法）：

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

^*我已经在IE9，IE10和最新版本的Chrome，Firefox，Opera和Safari中进行了测试。

div {
  width: 150px;
}

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

作为CSS3的一部分，尚不完全支持它，但是您可以在此处找到有关自动换行的信息。另一个选择是wbr标签＆shy;和＆＃8203;。都没有完全支持。

您的示例可以在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>

根据你想看到什么，你可以使用的组合hyphen，soft hyphen和/或zero width space。

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

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

111111­222222­-333333​444444-​555555

然后您的浏览器将显示此内容，且不会出现断字：

1111112222222-33333334444444-5555555

这将使每个可能的断字：

111111-
222222-
-333333
444444-
555555

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

您也可以使用：

word-break:break-all;

例如

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

输出：

abababababa
ababababbba
abbabbababa
ababb

断字是将所有单词或行都打断，即使句子中没有空格也不提供所提供的宽度或高度。螺母，您必须提供宽度或高度。

不间断的连字符效果很好。

HTML实体（十进制）

‑

代替-您可以使用‐或\u2010。

此外，确保了连字符的CSS属性是不能设置为无（默认值是手动）。

<wbr>Internet Explorer不支持。

希望这会有所帮助

<br>在您想换行的地方使用（break）标签。

您可以在连字符后面使用0宽度的空格：

div {
  width: 150px;
}

<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

如果您想在使用连字符之前先换行​-。