给定一个相对简单的 CSS：
div {
width: 150px;
}<div>
12333-2333-233-23339392-332332323
</div>如何使字符串保持在
width150的范围内，并在连字符上换行？
问问题
21174 次
11 回答
75
用这个替换你的连字符：
­
它被称为“软”连字符。
div {
width: 150px;
}<div>
12333­2333­233­23339392­332332323
</div>于 2008-08-04T00:25:11.227 回答
34
在所有现代浏览器*（以及一些较旧的浏览器）中，该<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>于 2012-01-30T06:53:13.320 回答
18
作为 CSS3 的一部分，它尚未得到完全支持，但您可以在此处找到有关自动换行的信息。另一个选项是wbr 标签、 和 其中没有一个是完全支持的。
于 2008-08-04T00:25:28.403 回答
8
您的示例在 Google Chrome、Safari (Windows) 和 IE8 中按预期工作。在 Firefox 3 和 Opera 9.5 中，文本超出了 150 像素的框。
此外­不适用于您的示例，因为它会：
在分词时工作，但在不分词时不显示任何连字符，或
在不分词时工作，但在分词时显示两个连字符，因为它在中断时添加了一个连字符。
于 2008-09-15T23:15:35.183 回答
8
在这个特定的例子中（你的字符串将包含连字符）我会将文本转换到这个服务器端：
<div style="width:150px;">
<span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>于 2008-12-05T12:36:27.603 回答
7
根据您想确切看到的内容，您可以使用hyphen、soft hyphen和/或的组合zero width space。
在软连字符上，您的浏览器可以分词（添加连字符）。在零宽度空间上，您的浏览器可以分词（不添加任何内容）。
因此，如果您的代码类似于：
111111­222222­-333333​444444-​555555
那么您的浏览器将显示此内容而没有分词：
1111112222222-33333334444444-5555555
这将是每一个可能的断词：
111111-
222222-
-333333
444444-
555555
只需选择您需要的选项。在您的情况下，它可能是 4s 和 5s 之间的那个。
于 2010-09-16T09:04:10.070 回答
2
您还可以使用：
word-break:break-all;
前任。
<div style='width:10px'>ababababababbabaabababababababbabababa</div>
输出：
abababababa
ababababbba
abbabbababa
ababb
word-break 是打断所有单词或行，即使句子中没有空格且不超过提供的宽度或高度。为此，您必须提供宽度或高度。
于 2015-08-27T12:40:39.950 回答
0
不间断的连字符效果很好。
HTML 实体（十进制）
‑
于 2014-03-21T22:09:57.093 回答
0
-您可以使用‐or代替\u2010。
此外，请确保hyphens css 属性未设置为none（默认值为manual）。
<wbr>不受Internet Explorer支持。
于 2015-05-14T04:29:27.450 回答
0
希望这可能会有所帮助
在要换行的地方使用<br>（中断）标签。
于 2017-08-31T10:53:47.597 回答
0
您可以在连字符后使用 0 宽度空格：
div {
width: 150px;
}<div>
12333-​2333-​233-​23339392-​332332323
</div>如果您想在连字符之前换行，请​-改用。
于 2018-09-13T10:21:04.287 回答