给出一个相对简单的CSS：
div {
width: 150px;
}<div>
12333-2333-233-23339392-332332323
</div>
如何使字符串保持约束 150 的width，并简单地换行到连字符的换行符？
答案 0 :(得分：63)
用以下代码取代连字符：
­
它被称为“软”连字符。
div {
width: 150px;
}<div>
12333­2333­233­23339392­332332323
</div>
答案 1 :(得分：31)
在所有现代浏览器 * （以及某些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>
答案 2 :(得分：17)
作为CSS3的一部分，尚未完全支持but you can find information on word-wrapping here。另一个选项是wbr tag, ­, and ​，其中没有一个完全支持。
答案 3 :(得分：8)
您的示例在Google Chrome，Safari（Windows）和IE8中按预期工作。该文本突破了Firefox 3和Opera 9.5中的150px框。
此外­对您的示例不起作用，因为它会：
在破字时工作但不破坏字符时不显示任何连字符，或
在没有断字时工作，但在断字时显示两个连字符 因为它在休息时添加了一个连字符。
答案 4 :(得分：8)
在这个特定的实例中（你的字符串将包含连字符）我将文本转换为这个服务器端：
<div style="width:150px;">
<span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>
答案 5 :(得分：7)
根据您想要查看的内容，您可以结合使用hyphen，soft hyphen和/或zero width space。
在软连字符上，您的浏览器可以断字（添加连字符）。 在零宽度空间中，您的浏览器可以断字（不添加任何内容）。
因此，如果您的代码类似于：
111111­222222­-333333​444444-​555555
然后您的浏览器将显示此内容而不会出现任何分词：
1111112222222-33333334444444-5555555
这将是每一个可能的分词：
111111-
222222-
-333333
444444-
555555
只需选择您需要的选项即可。在你的情况下，它可能是4s和5s之间的那个。
答案 6 :(得分：1)
您也可以使用：
word-break:break-all;
离。
<div style='width:10px'>ababababababbabaabababababababbabababa</div>
输出：
abababababa
ababababbba
abbabbababa
ababb
单词也会打破所有单词或行。坚果，你必须提供宽度或高度。
答案 7 :(得分：0)
不间断的连字符效果很好。
HTML实体（十进制）
‑
答案 8 :(得分：0)
您可以使用-或‐来代替\u2010。
另外，请确保连字符 css属性不设置为 none （默认值为 manual ）。
Internet Explorer 不支持 <wbr>。
答案 9 :(得分：0)
希望这可能会有所帮助
使用<br>（中断）标记来打破该行。
答案 10 :(得分：0)
您可以在连字符后面使用0个宽度的空格：
div {
width: 150px;
}<div>
12333-​2333-​233-​23339392-​332332323
</div>
如果要在连字符前换行，请改用​-。