首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在``word break: break-all`中使用自动CSS连字符?

如何在``word break: break-all`中使用自动CSS连字符?
EN

Stack Overflow用户
提问于 2013-03-07 09:46:52
回答 4查看 48.6K关注 0票数 36

我正在使用word-break: break-all;,我想知道如何让浏览器自动插入hyphens,如MDN example所示。

代码语言:javascript
复制
div {
  width: 80px;
  height: 80px;
  display: block;
  overflow: hidden;
  border: 1px solid red;
  word-break: break-all;
  hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
}
代码语言:javascript
复制
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

使文本看起来像这样:

代码语言:javascript
复制
aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa

我也创建了一个JSFiddle

这需要在IE9/IE10中工作,但如果它也能在Firefox和Chrome中工作就更好了。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2013-03-07 10:01:48

-ms-hyphens属性仅在IE10+中有效。这在IE9或更低版本中是不可能的。

请参阅您提供的参考链接底部的浏览器兼容性图表。

它还不能在Chrome上运行:WebKit Hyphenation

票数 12
EN

Stack Overflow用户

发布于 2013-03-07 12:47:19

word-break属性和连字符是两个完全不同的东西。第一个,最初主要是为东亚语言设计的,对像英语这样的语言有不好的影响:它在某些地方任意地切割单词,而不会发现一个单词已经断了。

因此,您应该决定是否有一个可以由浏览器在任何时候插入换行符的表达式,或者是否需要连字符。

对于连字,CSS代码本身是可以的,尽管许多人会建议将标准属性设置hyphens: auto放在属性前缀之后的最后。但它要求在超文本标记语言中声明文本的语言,例如使用<div lang=en>。此外,浏览器支持仍然是有限的:IE9不支持这样的连字,IE10中的支持涵盖了相对较小的语言集(当然包括英语)。

对于IE 9上的自动连字,您需要使用服务器端编程连字,或者更简单地,使用Hyphenator.js等工具进行客户端连字。

票数 27
EN

Stack Overflow用户

发布于 2013-03-07 10:05:30

如果浏览器支持& language包含连字符词典,则插入连字符。但是你的

aaaaaaaaaaaaaaaaaa

字典里没有。

因此,您必须像在https://jsfiddle.net/LJYj3/5/中一样插入软连字符&shy;以满足您的要求

这里有更多值得思考的内容:https://stackoverflow.com/a/856322/1696030

票数 11
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15261605

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档