html -如何破折号?

Translate

给定一个相对简单的CSS:

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>
This question and all comments follow the "Attribution Required."

所有的回答

Translate

以此替换连字符:

&shy;

它称为“软”连字符。

div {
  width: 150px;
}
<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>
来源
Translate

在所有现代浏览器中*(在某些情况下较旧的浏览器,)<wbr>元件是提供机会在特定位置打断长词的完美工具。

引用该链接:

分词机会(<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>
来源
Translate

作为CSS3的一部分,尚不完全支持它,但您可以在此处找到有关自动换行的信息。另一种选择是wbr标签&shy;和&#8203;都没有完全支持。

来源
Translate

您的示例可以在Google Chrome,Safari(Windows)和IE8中正常运行。文本在Firefox 3和Opera 9.5中突破了150px框。

另外&shy;对于您的示例将不起作用,因为它将:

  • 断字时工作,但不断字时不显示任何连字符,或者

  • 不断字时工作,但断字时显示两个连字符,因为它会在断点处添加连字符。

来源
Translate

在这种特定情况下(您的字符串将包含连字符),我将文本转换到此服务器端:

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

根据您想确切看到的内容,可以结合使用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之间的那一个。

来源
Translate

您也可以使用:

word-break:break-all;

例如

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

输出:

abababababa
ababababbba
abbabbababa
ababb

断字是将所有单词或行都打断,即使句子中没有空格也不提供所提供的宽度或高度。螺母,您必须提供宽度或高度。

来源
Translate

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

HTML实体(十进制)

&#8209;
来源
Translate

代替-您可以使用&hyphen;要么\u2010.

另外,请确保连字号CSS属性原为设置没有(默认值为手册).

<wbr>不受支持IE浏览器.

来源
Translate

希望这会有所帮助

采用<br>(break)标签,您要在其中换行。

来源
Translate

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

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