CSS 如何在`word-break: break-all`中使用自动CSS连字符？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15261605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use automatic CSS hyphens with `word-break: break-all`?
提问by chovy
I'm using word-break: break-all;and want to know how I can have the browser automatically insert the hyphens, as demonstrated in an MDN example.
我正在使用word-break: break-all;并想知道如何让浏览器自动插入连字符，如MDN 示例中所示。
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;
}<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>Such that the text would look like this:
这样文本看起来像这样：
aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa
I created a JSFiddletoo.
我也创建了一个JSFiddle。
This needs to work in IE9/IE10, but it'd be nice if it'd work in Firefox and Chrome as well.
这需要在 IE9/IE10 中工作，但如果它也能在 Firefox 和 Chrome 中工作，那就太好了。
采纳答案by Ben Lee
The -ms-hyphensproperty only works in IE10+. It's not possible in IE9 or below.
该-ms-hyphens属性仅适用于 IE10+。在 IE9 或更低版本中是不可能的。
See the browser compatibility chart at the bottom of the reference link you provided.
请参阅您提供的参考链接底部的浏览器兼容性图表。
It doesn't work in Chrome yet: WebKit Hyphenation
它还不能在 Chrome 中工作：WebKit Hyphenation
回答by Jukka K. Korpela
The word-breakproperty and hyphenation are two completely different things. The first one, originally intended for East Asian languages mainly, does bad things to languages like English: it arbitr arily cuts w ords at some poi nts without ind icating that a word has been broke n.
在word-break财产和断字是两个完全不同的事情。第一个，最初主要用于东亚语言，对英语等语言造成了不好的影响：它在某些点上任意删减了单词，而没有表明一个单词已经被破坏了。
So you should decide whether you have an expression where a line break can be inserted by a browser at any point or whether you want hyphenation.
因此，您应该决定是否有浏览器可以在任何时候插入换行符的表达式，或者是否需要连字符。
For hyphenation, the CSS code as such is OK, though many people would advice putting the standard property setting hyphens: autolast, after prefixed properties. But it requires that the language of the text be declared in HTML markup, using e.g. <div lang=en>. Moreover, browser support is still limited: IE 9 does not support such hyphenation, and the support in IE 10 covers a relatively small set of languages (including English of course).
对于断字，CSS 代码本身是可以的，尽管许多人会建议将标准属性设置放在hyphens: auto前缀属性之后。但它要求在 HTML 标记中声明文本的语言，例如使用<div lang=en>. 此外，浏览器支持仍然有限：IE 9 不支持这种断字，而 IE 10 中的支持涵盖了相对较少的语言集（当然包括英语）。
For automatic hyphenation on IE 9, you would need to use either server-side programmed hyphenation or, simpler, client-side hyphenation with tools like Hyphenator.js.
对于 IE 9 上的自动断字，您需要使用服务器端编程的断字，或者更简单的客户端断字以及 Hyphenator.js 等工具。
回答by Volker E.
Hyphens are inserted if the browser supports & language includes a hyphenation dictionary. But your
如果浏览器支持且语言包含连字符字典，则会插入连字符。但是你的
aaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaa
isn't in a dictionary.
不在字典里。
Therefore you have to insert soft hyphens ­to your satisfaction like in https://jsfiddle.net/LJYj3/5/
因此，您必须­像在https://jsfiddle.net/LJYj3/5/ 中一样插入软连字符以满足您的需求
Here's more food for thought: https://stackoverflow.com/a/856322/1696030
这里有更多的思考：https: //stackoverflow.com/a/856322/1696030
