CSS WebKit 断字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5356752/
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
WebKit Hyphenation
提问by dandax
Has anyone successfully been able to implement hyphenation in any of the WebKit browsers? I've tried the CSS3 hyphenationstyle as well as -webkit-hyphens: auto. No dice for either of those. Or maybe I'm doing something wrong?
有没有人成功地在任何 WebKit 浏览器中实现断字？我已经尝试过 CSS3hyphenation样式以及-webkit-hyphens: auto. 两者都没有骰子。或者也许我做错了什么？
Note: I've only tried Safari and Chrome on a Mac.
注意：我只在 Mac 上尝试过 Safari 和 Chrome。
Update:Code example
更新：代码示例
<html>
<head>
<style>
div {
-webkit-hyphens: auto;
}
</style>
</head>
<body>
<div style="width: 150px; border: solid 1px black;">
<p>Anaideia, spirit of ruthlessness, shamelessness, and unforgivingness</p>
<p>Supercalifragilisticexpialidocious, Antidisestablishmentarianism, Floccinaucinihilipilification, Hippopotomonstrosesquipedaliophobia</p>
</div>
</body>
</html>
回答by Rich Bradshaw
-webkit-hyphens works fine on iOS 4.2 and above, and is partially supported in the webkit nightlies.
-webkit-hyphens 在 iOS 4.2 及更高版本上运行良好，并且在 webkit nightlies 中部分支持。
Webkit:
网络套件：
iOS 4.3:
iOS 4.3：
回答by nachomaans
It works in Safari (tested with Safari 5.1 on OS X Lion, and Safari mobile on iPad), not with Chrome yet. See http://caniuse.com/css-hyphensfor hyphens browser support.
它适用于 Safari（在 OS X Lion 上使用 Safari 5.1 进行测试，在 iPad 上使用 Safari mobile 进行测试），而不适用于 Chrome。有关连字符浏览器的支持，请参阅http://caniuse.com/css-hyphens。
Here is how paragraphs are styled in the 320 and up project (http://www.stuffandnonsense.co.uk/projects/320andup/):
以下是 320 及以上项目 ( http://www.stuffandnonsense.co.uk/projects/320andup/) 中段落的样式：
p {
hyphens:auto;
text-align:justify;
-webkit-hyphens:auto;
-webkit-hyphenate-character:"10";
-webkit-hyphenate-limit-after:1;
-webkit-hyphenate-limit-before:3;
-moz-hyphens:auto;
}
(last line is for Firefox)
（最后一行适用于 Firefox）
So justified text in browsers which was a big no-no is slowly becoming a reality.
因此，浏览器中的合理文本是一个很大的禁忌，正在慢慢成为现实。
回答by adriatiq
Better days are coming.. After browsing the Editors working draft- In the instance provided I think the better property in future would be 'overflow-wrap:'. 'hyphens:' is really more suited to general formatting requirements, whereas overflow-wrap is for the emergency cases of overly long words that require breaking. The best value would be
更好的日子即将到来.. 浏览了编辑工作草案后- 在提供的实例中，我认为未来更好的属性将是“溢出包装：”。'hyphens:' 确实更适合一般格式要求，而 overflow-wrap 用于需要中断的过长单词的紧急情况。最好的价值是
* {
overflow-wrap:hyphenate.
}
Alas overflow-wrap doesen't seem to be supported in any way just yet on the iphone or firefox, and overflow-wrap:hyphenate isn't even in the working draft. (sadface)
唉，目前在 iphone 或 firefox 上似乎还没有以任何方式支持 overflow-wrap，而且 overflow-wrap:hyphenate 甚至不在工作草案中。（悲伤的脸）
