Menu
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>
601
There are two Unicode characters used to manually specify potential line break points within text: U+2010 (HYPHEN) The "hard" hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered.
By default, CSS sets no limit to the number of consecutive hyphens, but you can use the hyphenate-limit-lines property to specify a maximum. Currently this is only supported by IE/Edge and Safari (with prefixes).
hyphens: manual Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. There are two characters that suggest line break opportunity: U+2010 (HYPHEN): the “hard” hyphen character indicates a visible line break opportunity.
Hyphenate text automaticallyOn the Tools menu, click Hyphenation. Select the Automatically hyphenate document check box. In the Hyphenation zone box, enter the amount of space to leave between the end of the last word in a line and the right margin.
-webkit-hyphens works fine on iOS 4.2 and above, and is partially supported in the webkit nightlies.
Webkit:
iOS 4.3:
164
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
