题
给定一个相对简单的 CSS:
div {
width: 150px;
}
<div>
12333-2333-233-23339392-332332323
</div>
我该如何做才能使字符串保持在 width
的 150, ,然后简单地换行到连字符上的换行符?
解决方案
将连字符替换为:
­
它称为“软”连字符。
div {
width: 150px;
}
<div>
12333­2333­233­23339392­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 框。
此外 ­
不适用于您的示例,因为它会:
在分词时有效,但在不分词时不显示任何连字符,或者
在不讲字的情况下工作,而是在打破文字时显示两个连字符,因为它会在休息时增加连字符。
在这个特定的实例中(您的字符串将包含连字符),我会将文本转换为该服务器端:
<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­222222­-333333​444444-​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 实体(十进制)
‑
代替 -
您可以使用 ‐
或者 \u2010
.
另外,请确保 连字符 CSS 属性是 不是 设置 没有任何 (默认值为 手动的).
<wbr>
不支持 IE浏览器.
希望这会有所帮助
使用 <br>
(break) 标记您想要换行的位置。
您可以在连字符后使用 0 宽度的空格:
div {
width: 150px;
}
<div>
12333-​2333-​233-​23339392-​332332323
</div>
如果您想在使用连字符之前换行 ​-
反而。