代码之家 › 专栏 › 技术社区 › Karl Seguin

如何破译?

text css html

Karl Seguin · 技术社区 · 16 年前

给出一个相对简单的CSS:

div {
  width: 150px;
}

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

如何使字符串保持在 width 属于 一百五十 在连字符上换行?

11 回复 | 直到 16 年前

Nhan Jonesinator 8 年前

将连字符替换为:

&shy;

它被称为“软”连字符。

div {
  width: 150px;
}

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

Nhan Jonesinator 8 年前

在所有现代浏览器中 ^* (还有一些 older browsers 同样, <wbr> element 是一个完美的工具,提供了机会,打破长词在特定的点。

从该链接引用:

破译的机会( <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>

HopelessN00b engtech 10 年前

作为CSS3的一部分,它还没有得到充分的支持, but you can find information on word-wrapping here . 另一个选择是 wbr tag, , and  也不完全支持其中任何一个。

Dave Rutledge 16 年前

您的示例在Google Chrome、Safari(Windows)和IE8中工作正常。文本从firefox 3和opera 9.5中的150px框中弹出。

另外  对于您的示例不起作用,因为它也会:

断字时工作,但不断字时不显示任何连字符,或
不断字时工作,但断字时显示两个连字符因为它在休息时加了一个连字符。

juzraai 6 年前

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

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

Up_One 10 年前

根据您想确切看到的内容,您可以使用 hyphen , soft hyphen 和/或 zero width space .

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

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

111111222222-333333444444-555555

然后您的浏览器将不显示分词:

111111 222222-3333333 4444444-5555555

这将使每一个可能的词都破译:

111111
222222
- 333333
444444
五十五万五千五百五十五

选择你需要的选项。在你的情况下,可能是在4s和5s之间。

Ajay Gupta 9 年前

您还可以使用:

word-break:break-all;

前任。

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

输出:

abababababa
ababababbba
abbabbababa
ababb

分词法是把所有的单词或行都折掉,即使句子中没有空格,也不等于提供的宽度或高度。螺母必须提供宽度或高度。

Mohammed Wahed Khan Michael 7 年前

希望这能有所帮助

使用 <br> (break)标记要断开线条的位置。

ImaJedi4ever 10 年前

不间断连字符工作良好。

HTML实体(十进制)

&#8209;

TObject 9 年前

而不是 - 你可以使用 &hyphen; 或 \u2010 .

另外,确保 连字符 CSS属性为不设置为 没有人 (默认值为手册 )

<wbr> 不支持 Internet Explorer .

jcubic 6 年前

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

div {
  width: 150px;
}

<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

如果要在连字符前换行,请使用 - 相反。