如何在短划线上打破文字？
给定一个相对简单的CSS：
div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div>
我怎样才能让string保持150的width ，并简单地在连字符上换行呢？
用这个replace你的连字符：
­
这被称为“软”连字符。
div { width: 150px; }
<div> 12333­2333­233­23339392­332332323 </div>
在所有的现代浏览器* （以及一些较旧的浏览器中 ）， <wbr>元素是提供在特定点处打破冗长单词的绝佳工具。
从这个链接引用：
Word Break Opportunity（
<wbr>）HTML元素表示文本中的位置，浏览器可以select打断一行，尽pipe其断行规则不会在该位置创build中断。
下面是在OP的例子中如何使用它（或者在JSFiddle中看到它的作用）：
<div style="width: 150px;"> 12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323 </div>
*我已经在IE9，IE10以及最新版本的Chrome，Firefox，Opera和Safari上进行了testing。
div { width: 150px; }
<div> 12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323 </div>
作为CSS3的一部分，它还没有完全支持， 但你可以在这里find关于包装的信息 。 另一个选项是wbr标签，＆shy;和＆＃8203; 没有一个也完全支持。
您的示例在Google Chrome，Safari（Windows）和IE8中按预期工作。 文本突破了Firefox 3和Opera 9.5中的150px框。
另外­ 将不适用于您的示例，因为它会：
-
工作时破字，但不破字时不显示任何连字符，或
-
当没有破字的时候工作，但在破字时显示两个连字符，因为它在rest时加了一个连字符。
在这个特定的实例（你的string将包含连字符），我会把文本转换到这个服务器端：
<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
这将使每一个可能的文字rest：
111111-
222222-
-333333
444444-
555555
只要拿起你需要的选项。 就你而言，这可能是4到5之间的一个。
你也可以使用：
word-break:break-all;
恩。
<div style='width:10px'>ababababababbabaabababababababbabababa</div>
输出：
abababababa ababababbba abbabbababa ababb
即使在没有提供宽度或高度的句子中没有空格，断字也是全部断言或行断。 坚果，你必须提供一个宽度或高度。
非破折号连字符运行良好。
HTML实体（十进制）
‑
而不是-你可以使用‐ 或\u2010 。
此外，请确保连字符 css属性没有设置为无 （默认值是手动 ）。
Internet Explorer不支持<wbr> 。
希望这可能有帮助
使用<br> （打破）标记您想要打破行的地方。
