如何破折号码？

Question

给出一个相对简单的CSS:

div {
  width: 150px;
}

<div>
  12333-2333-233-23339392-332332323
</div>

怎样让这个字符串撑约束到width的150,并简单地包装上连字符换行？

Answer 1

用这个替换你的连字符:

­

它被称为"软"连字符.

div {
  width: 150px;
}

<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Answer 2

在所有现代浏览器中^*(以及一些旧版浏览器中),该<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>

Answer 3

作为CSS3的一部分,它尚未得到完全支持,但您可以在此处找到有关自动换行的信息.另一种选择是wbr标签,­和​ 其中没有一个完全支持.

Answer 4

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

另外­不适用于您的示例,因为它将:

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

• 在不破坏字符时工作但在断字时显示两个连字符,因为它在休息时添加了连字符.

Answer 5

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

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

Answer 6

根据你想看到什么,你可以使用的组合hyphen,soft hyphen和/或zero width space.

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

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

111111­222222­-333333​444444-​555555

然后你的浏览器将显示这个没有任何分词:

1111112222222-33333334444444-5555555

这将是每一个可能的断字:

111111-
222222-
-333333
444444-
555555

只需选择您需要的选项即可.在您的情况下,它可能是4s和5s之间的那个.