Note that
hyphens
is language-sensitive. Its ability to find break opportunities depends on the language, defined in the
lang
attribute of a parent element. Not all languages are supported yet, and support depends on the specific browser.
Syntax
.element {
hyphens: none | manual | auto
hyphens: none
Words are never hyphenated at line breaks, even if characters inside the word suggest where hyphenation could or should go.
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. Even if the line is not actually broken at that point, the hyphen is still rendered. Literally a “-“.
U+00AD (SHY): an invisible, “soft” hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use ­ to insert a soft hyphen.
hyphens: auto
Words can be broken at appropriate hyphenation points either as determined by hyphenation characters (see above) inside the word or as determined automatically by a language-appropriate hyphenation resource (if supported by the browser or provided via @hyphenation-resource).
Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation points within the word.
hyphens: all
Deprecated, do not use. This was only in the spec temporarily for testing.
The demo below has a bunch of paragraphs and everything is set to hyphens: auto; to demonstrate the concept of hyphenation. The lang attribute is set to en on the parent element.
Browser support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Chrome < 55 and Android browser actually support -webkit-hyphens: none, which is the default value, but none of the other values.
In Firefox and Internet Explorer, automatic hyphenation only works for some languages (defined with the lang attribute). See this note for a comprehensive list of supported languages.
If you are writing a web-based document that really need hyphenation, you can use Hyphenator.js which is a library based on a vast dictionary that will automatically inject soft hyphens and zero-width spaces into your content.
Without JavaScript, you’ll have to rely on both hyphens and word-wrap:
I added this to my website in November 2012. I was able to justify text and it looked much better and was more readable. Then I tried it in Chrome. What a disaster. I had to turn off justification because it looks awful in Chrome.
There were also issues with the number of words browsers could hyphenate in a paragraph that typographers would not like. I’d say it’s not ready. I still use it, but I’ve turned off text justification because of Chrome.
When is Chrome going to support hyphenation? They are behind Firefox, IE, and Safari (mobile and desktop).
This needs to be updated. Firefox doesn’t play well with both hyphens: auto and word-break: break-all. I had to use @supports rule to make the hyphen to show up on FF 3x+.
@supports not (hyphens: auto) {
.class {
word-break: break-all;
.class {
/* Non standard for webkit
* overrides blink default */
word-break: break-word;
hyphens: auto;
I did a research[1] recently and found out that using word-break: break-all; in combination with hyphens: auto; doesn’t work as expected in Firefox as words are not hyphenated anymore. Instead, I found that you can use overflow-wrap: break-word which works great in Firefox and also on Opera Mini where word-break is not supported.
NB: I’m using “manual” values because this most-often comes up in titles that use larger fonts. Giving editors the opportunity to insert a soft hyphen seems to make sense. The overflow ellipsis I threw in as a fallback (but it’s not tested). What do you think?
the snippet of the article should be updated, there are no reasons to declare
word-break: break-all;
// Non standard for webkit
word-break: break-word;
and using
-ms-word-break: break-all;
word-break: break-all;
will simply force a break at random position in a word to go to a new line, avoiding hyphenation when supported
Thanks Sara for the article. I tried to use some of your recommendations but all of them fail in one way or another.
In my opinion hyphenation is a long way far from being practical. The best approach is to justify text and pray for the best. On tables I use to hyphenate long words, otherwise on tablets and smartphones the result is a disaster. In short, unless all browser gurus agree to make standard rules all this is just a waste of time and a lot of wasted effort by idiots, like us, trying to make perfect web pages.
Yes, yes, I know they are the idiots not us.
In general, I think the hypens: auto property is one to avoid.
Upon upgrading to Chrome 55.0.2883.95, this property caused serious issues with tabular data on my site:
tabular data overlapping into neighboring columns,
arbitrary breaks,
and the failure for the browser to adjust the size of the column to the widest/biggest cell.
The more I think about it, the more I just don’t see much use for this property at all…
Kind of amazing that so many years later, Chrome still relies on the usage of a browser-specific prefix! I wonder what’s the hold-up.
