如何断字后的特殊字符喜欢连字符(-)

小开

最佳答案

用这个代替你的连字符:

&shy;

这叫“软”连字符。

div {
width: 150px;
}

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

小开

作为 CSS3的一部分，它尚未得到完全支持，即但是你可以在这里找到关于文字包装的信息。另一个选项是 Wbr 标签，& 害羞; 和 & # 8203;，它们都不受完全支持。

小开

您的示例在 GoogleChrome、 Safari (Windows)和 IE8中都能正常工作。文本从 Firefox 3和 Opera 9.5的150px 框中跳出。

此外，也不适用于您的示例，因为它也适用于:

小开

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

<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的组合。

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

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

111111222222-333333444444-555555

那么你的浏览器就会显示这个，而不会断字:

111112222222-3333334444444-55555

以下是所有可能的解释:

111111 -
22222 -
-333333
44444-
555555

只要选择你需要的选项。在你的情况下，它可能是一个介于4和5之间。

小开

在所有的现代浏览器 ^*中(在一些老式的浏览器中也是如此) ，<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>

小开

非破坏连字符工作得很好。

HTML 实体(小数)

&#8209;

小开

你可以使用 &hyphen;或者 \u2010代替 -。

另外，确保 连字符 css 属性的没有设置为没有(默认值是 手动操作)。

Internet Explorer不支持 <wbr>。

小开

你亦可使用:

word-break:break-all;

前男友。

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

产出:

abababababa
ababababbba
abbabbababa
ababb

即使句子中没有空格，也要断开所有的单词或行，即使没有空格也要断开所提供的宽度或高度。螺母为此，你必须提供一个宽度或高度。

小开

希望这个能帮上忙

使用 <br>(break)标记来中断行。

小开

可以在连字符后面使用0宽度空间:

div {
width: 150px;
}

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

如果您希望在连字符之前断行，则改为使用 -。