如何破折号码?

时间:2008-08-04 00:17:35

标签: html css text

给出一个相对简单的CSS:

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>

如何使字符串保持约束 150 width,并简单地换行到连字符的换行符?

11 个答案:

答案 0 :(得分:63)

用以下代码取代连字符:

&shy;

它被称为“软”连字符。

div {
  width: 150px;
}
<div>
  12333&shy;2333&shy;233&shy;23339392&shy;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, &shy;, and &#8203;,其中没有一个完全支持。

答案 3 :(得分:8)

您的示例在Google Chrome,Safari(Windows)和IE8中按预期工作。该文本突破了Firefox 3和Opera 9.5中的150px框。

此外&shy;对您的示例不起作用,因为它会:

  • 在破字时工作但不破坏字符时不显示任何连字符,或

  • 在没有断字时工作,但在断字时显示两个连字符 因为它在休息时添加了一个连字符。

答案 4 :(得分:8)

在这个特定的实例中(你的字符串将包含连字符)我将文本转换为这个服务器端:

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

答案 5 :(得分:7)

根据您想要查看的内容,您可以结合使用hyphensoft hyphen和/或zero width space

在软连字符上,您的浏览器可以断字(添加连字符)。 在零宽度空间中,您的浏览器可以断字(不添加任何内容)。

因此,如果您的代码类似于:

111111&shy;222222&shy;-333333&#8203;444444-&#8203;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)

希望这可能会有所帮助

使用<br>(中断)标记来打破该行。

答案 8 :(得分:0)

您可以在连字符后面使用0个宽度的空格:

div {
  width: 150px;
}
<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

如果要在连字符前换行,请改用&#8203;-

答案 9 :(得分:0)

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

HTML实体(十进制)

&#8209;

答案 10 :(得分:0)

您可以使用-&hyphen;来代替\u2010

另外,请确保连字符 css属性设置为 none (默认值为 manual )。

Internet Explorer 不支持

<wbr>