如何在连字符 (-) 等特殊字符后断词

Question

给定一个相对简单的 CSS：

 div { width: 150px; }

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

如何使字符串保持在150的width内，并在连字符上换行？

Answer 1

用这个替换你的连字符：

­

它被称为“软”连字符。

 div { width: 150px; }

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

Answer 2

在所有现代浏览器^* （以及一些较旧的浏览器中）中， <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>

Answer 3

作为 CSS3 的一部分，它尚未得到完全支持，但您可以在此处找到有关自动换行的信息。 另一个选项是wbr 标签、­ 和 ​ 也没有完全支持。

Answer 4

在这个特定实例中（您的字符串将包含连字符），我会将文本转换为此服务器端：

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

Answer 5

您的示例在 Google Chrome、Safari (Windows) 和 IE8 中按预期工作。 文本在 Firefox 3 和 Opera 9.5 中超出 150px 框。

另外­ 不适用于您的示例，因为它会：

• 断字时工作但不断字时不显示任何连字符，或

• 在不断字时工作，但在断字时显示两个连字符，因为它在中断时添加了一个连字符。

Answer 6

根据您想要准确查看的内容，您可以使用hyphen 、 soft hyphen和/或zero width space 。

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

因此，如果您的代码类似于：

111111­222222­-333333​444444-​555555

然后您的浏览器将显示此内容而没有断字：

1111112222222-33333334444444-5555555

这将是所有可能的断字：

111111-
222222-
-333333
444444-
555555

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

Answer 7

您还可以使用：

word-break:break-all;

前任。

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

输出：

abababababa
ababababbba
abbabbababa
ababb

word-break 是中断所有单词或行，即使句子中没有空格，而不是提供的宽度或高度。 为此，您必须提供宽度或高度。

Answer 8

不间断连字符效果很好。

HTML 实体（十进制）

‑

Answer 9

而不是-你可以使用‐ 或\‐ 。

另外，请确保hyphens css 属性未设置为none （默认值为manual ）。

<wbr>不受Internet Explorer支持。

Answer 10

希望这可能会有所帮助

在要换行的地方使用<br> (break) 标签。

Answer 11

您可以在连字符后使用 0 宽度空间：

 div { width: 150px; }

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

如果您想在连字符之前换行，请使用​-代替。