给定一个相对简单的 CSS:

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

我该如何做才能使字符串保持在 width150, ,然后简单地换行到连字符上的换行符?

有帮助吗?

解决方案

将连字符替换为:

&shy;

它称为“软”连字符。

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

其他提示

在所有现代浏览器中* (并且在某些 较旧的浏览器, ,也), <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>

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

您的示例在 Google Chrome、Safari (Windows) 和 IE8 中按预期运行。在 Firefox 3 和 Opera 9.5 中,文本超出了 150px 框。

此外 &shy; 不适用于您的示例,因为它会:

  • 在分词时有效,但在不分词时不显示任何连字符,或者

  • 在不讲字的情况下工作,而是在打破文字时显示两个连字符,因为它会在休息时增加连字符。

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

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

根据您想要查看的具体内容,您可以组合使用 hyphen, soft hyphen, ,和/或 zero width space.

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

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

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

那么您的浏览器将显示此内容,且不带断词:

1111112222222-33333334444444-5555555

这将是所有可能的断词:

111111-
222222-
-333333
444444-
555555

只需选择您需要的选项即可。就您而言,它可能是 4 到 5 之间的一个。

您还可以使用:

word-break:break-all;

前任。

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

输出:

abababababa
ababababbba
abbabbababa
ababb

分词是断开所有单词或行,即使句子中没有空格,且不符合提供的宽度或高度。为此,您必须提供宽度或高度。

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

HTML 实体(十进制)

&#8209;

代替 - 您可以使用 &hyphen; 或者 \u2010.

另外,请确保 连字符 CSS 属性是 不是 设置 没有任何 (默认值为 手动的).

<wbr> 不支持 IE浏览器.

希望这会有所帮助

使用 <br>(break) 标记您想要换行的位置。

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

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

如果您想在使用连字符之前换行 &#8203;- 反而。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top