如何在短划线上打破文字?

iqui 发布于 2018-02-05 css 最后更新 2018-02-05 01:10 626 浏览

给定一个相对简单的CSS:

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>
我怎样才能使字符串保持限制在 150 width,并简单地换行连字符换行符?
已邀请:

jquia

赞同来自:

用这个替换你的连字符:

&shy;
这被称为“软”连字符。
div {
  width: 150px;
}
<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

aet

赞同来自:

作为CSS3的一部分,它还没有完全支持,but you can find information on word-wrapping here。另一个选项是wbr tag, &shy;, and &#8203;,其中没有一个完全支持。

overo

赞同来自:

您的示例在Google Chrome,Safari(Windows)和IE8中按预期工作。文本突破了Firefox 3和Opera 9.5中的150px框。 此外,&shy;不适用于您的示例,因为它可以:

  • 破字时工作,但不破字时不显示任何连字符,或
  • 在没有破字的情况下工作,但在破字时显示两个连字符 因为它会在中断处添加连字符。

eomnis

赞同来自:

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

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

yut

赞同来自:

根据您想要查看的内容,您可以使用hyphensoft hyphen和/或zero width space的组合。 在一个软连字符,您的浏览器可以分词(添加连字符)。 在一个零宽度的空间,你的浏览器可以打破文字(不添加任何东西)。 因此,如果你的代码是这样的: 111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555 那么你的浏览器将显示这个没有任何分词:

1111112222222-33333334444444-5555555
这将使每一个可能的文字休息:
111111-
222222-
-333333
444444-
555555
只要拿起你需要的选项。就你而言,这可能是4到5之间的一个。

mneque

赞同来自:

在所有的现代浏览器中,<wbr> element都是提供在特定点打破冗长单词的绝佳工具。 从这个链接引用:

The Word Break Opportunity (<wbr>) HTML element represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.
下面是在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>

lmagni

赞同来自:

非破折号连字符运行良好。 HTML实体(十进制)

&#8209;

hipsum

赞同来自:

您可以使用&hyphen;\u2010来代替-。 另外,请确保连字符 css属性 设置为 none (默认值为手动)。 Internet Explorer 不支持<wbr>

dmodi

赞同来自:

你也可以使用:

word-break:break-all;
恩。
<div style='width:10px'>ababababababbabaabababababababbabababa</div>
输出:
abababababa
ababababbba
abbabbababa
ababb
即使在没有提供宽度或高度的句子中没有空格,断字也是全部断言或行断。坚果,你必须提供一个宽度或高度。

zrerum

赞同来自:

希望这可能有帮助 使用<br>(中断)标记您想要分隔线的地方。