Has anyone successfully been able to implement hyphenation in any of the WebKit browsers? I've tried the CSS3 hyphenation style as well as -webkit-hyphens: auto. No dice for either of those. Or maybe I'm doing something wrong?
Note: I've only tried Safari and Chrome on a Mac.
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>
-webkit-hyphens works fine on iOS 4.2 and above, and is partially supported in the webkit nightlies.
Webkit:
iOS 4.3:
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-hyphens for hyphens browser support.
Here is how paragraphs are styled in the 320 and up project (http://www.stuffandnonsense.co.uk/projects/320andup/):
p {
hyphens:auto;
text-align:justify;
-webkit-hyphens:auto;
-webkit-hyphenate-character:"\2010";
-webkit-hyphenate-limit-after:1;
-webkit-hyphenate-limit-before:3;
-moz-hyphens:auto;
}
(last line is for Firefox)
So justified text in browsers which was a big no-no is slowly becoming a reality.
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
* {
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)
来源：https://stackoverflow.com/questions/5356752/webkit-hyphenation