如何在连字符 (-) 等特殊字符后分词答案

【问题标题】：How to break word after special character like Hyphens (-)如何在连字符 (-) 等特殊字符后分词
【发布时间】：2010-09-05 06:43:38
【问题描述】：

给定一个相对简单的 CSS：

div {
  width: 150px;
}

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

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

【问题讨论】：

这对你有用吗？我在 Firefox 中尝试过，它完全删除了连字符...
"this" 表示修复
@ChrisMarasti-Georg：我输入时有六个修复。
大帖：kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css

标签： html css text

【解决方案1】：

用这个替换你的连字符：

&shy;

它被称为“软”连字符。

div {
  width: 150px;
}

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

【讨论】：

... 除非有实际中断，否则它不会显示在显示屏中。因此，如果您总是希望显示连字符，那就不好了。
我想知道&shy; 的浏览器兼容性。 According to Quirksmode（见兼容性表），它运行良好，唯一的问题出现在旧版浏览器中，例如 FF2 和 IE5.5-6。

【解决方案2】：

在所有现代浏览器中^*（在某些older browsers 中也是如此），<wbr> element 是提供在特定点中断长词的机会的完美工具。

引用该链接：

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>

【讨论】：

【解决方案3】：

作为 CSS3 的一部分，它尚未得到完全支持，but you can find information on word-wrapping here。另一种选择是wbr tag, , and ，它们都不完全受支持。

【讨论】：

作为记录，word-wrap: break-word; 不会在 Firefox 中的连字符处中断（在 v11 中测试）

【解决方案4】：

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

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

在分词时工作，但在不分词时不显示任何连字符，或者
在不分词时工作，但在分词时显示两个连字符因为它在中断时添加了一个连字符。

【讨论】：

【解决方案5】：

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

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

【讨论】：

这应该没什么区别吧？或者，除非你把这些跨度放在 nowrap 上。

【解决方案6】：

根据您想确切看到的内容，您可以使用hyphen、soft hyphen 和/或zero width space 的组合。

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

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

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

然后您的浏览器将显示此内容而无需分词：

1111112222222-33333334444444-5555555

这将是所有可能的断词：

111111-
222222-
-333333
444444-
555555

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

【讨论】：

小心浏览器不兼容问题。在此处查看兼容性表：quirksmode.org/oddsandends/wbr.html
请注意，&shy; 是迄今为止更好的选择。例如，所有其他人都会破坏字体文本字距调整。

【解决方案7】：

你也可以使用：

word-break:break-all;

例如

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

输出：

abababababa
ababababbba
abbabbababa
ababb

分词是打断所有单词或行，即使句子中没有空格且不超过提供的宽度或高度。必须提供宽度或高度。

【讨论】：

【解决方案8】：

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

HTML 实体（十进制）

&#8209;

【讨论】：

【解决方案9】：

您可以使用&hyphen; 或\u2010 而不是-。

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

Internet Explorer 不支持<wbr>。

【讨论】：

【解决方案10】：

希望对你有帮助

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

【讨论】：

【解决方案11】：

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

div {
  width: 150px;
}

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

如果您想在连字符前换行，请改用&#8203;-。

【讨论】：