给出一个相对简单的CSS:

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

如何使字符串保持约束width150 ,并简单地换行到连字符的换行符?

===============>>#1 票数:64 已采纳

用这个替换你的连字符:

&shy;

它被称为“软”连字符。

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

===============>>#2 票数:31

在所有现代浏览器* (以及一些旧版浏览器中 ), <wbr>元素是提供在特定点打破长词的机会的完美工具。

引用该链接:

Word Break Opportunity( <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> 

===============>>#3 票数:17

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

===============>>#4 票数:8

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

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

===============>>#5 票数:8

您的示例在Google Chrome,Safari(Windows)和IE8中按预期工作。 该文本突破了Firefox 3和Opera 9.5中的150px框。

另外&shy; 不适用于你的例子,因为它将:

  • 打破破解时的工作,但不破坏时不显示任何连字符,或

  • 在不破坏字符时工作但在断字时显示两个连字符,因为它在休息时添加了连字符。

===============>>#6 票数:7

根据您想要查看的内容,您可以使用hyphensoft hyphen和/或zero width space

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

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

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

然后你的浏览器将显示这个没有任何分词:

1111112222222-33333334444444-5555555

这将是每一个可能的断字:

111111-
222222-
-333333
444444-
555555

只需选择您需要的选项。 在您的情况下,它可能是4s和5s之间的那个。

===============>>#7 票数:1

您还可以使用:

word-break:break-all;

恩。

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

输出:

abababababa
ababababbba
abbabbababa
ababb

即使句子中的空格没有提供宽度或高度,所以单词也可以打破所有单词或行。 坚果,你必须提供宽度或高度。

===============>>#8 票数:0

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

HTML实体(十进制)

&#8209;

===============>>#9 票数:0

而不是-你可以使用&hyphen; \‐

此外,请确保连字符 css属性设置为none (默认值为manual )。

Internet Explorer不支持<wbr>

===============>>#10 票数:0

希望这可能有所帮助

使用<br> (break)标记你要打破这一行。

===============>>#11 票数:0

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

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

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

  ask by Karl Seguin translate from so

未解决问题?本站智能推荐:

关注微信公众号