The hyphens property controls the hyphenation of text.
Hyphenation allows the controlled splitting of words onto 2 lines to improve the layout of text when wrapping lines, typically splitting words at syllabic or morphemic boundaries and visually indicating the split (usually by inserting a hyphen, U+2010). In some cases, hyphenation may also alter the spelling of a word.
Using the hyphens property you can prevent hyphenation from happening at all, allow it, or only allow it when certain characters are present.
One important thing to keep in mind is that hyphenation will work only when the lang attribute if defined where you want the hyphenation to be applied, because hyphens are language-specific, and each language has its own rules for hyphenation which determine appropriate hyphenation points in words. So You must specify a language using the lang HTML attribute in order to guarantee that automatic hyphenation is applied in the language of your choice (if an appropriate hyphenation dictionary for that language is available). On XML, the xml:lang attribute must be used.
Use the simplest solution and declare it on the html tag, like:
<html lang="en">
Trivia & Notes
This lang attribute does not work on a <p>—no browser picks up the language. It works fine on a div, though. So if a certain section of a page is in a different language, add the lang attribute to something above a p and test hyphenation properly.
CSS Text Level 3 does not define the exact rules for hyphenation, so the same text’s hyphenation may vary from browser to browser.
Official Syntax
-
Syntax:
hyphens: none | manual | auto
- Initial: manual
- Applies To: all elements
- Animatable: no
Values
- none
-
Words are not broken and/or hyphenated at line breaks, even if characters inside the words suggest where a hyphen could or should go. Words broken by setting the
word-breakorword-wrapproperties also won’t be hyphenated.Lines will only wrap at white spaces, unless specified otherwise by theword-breakorword-wrapproperties. Seeword-breakorword-wrapfor more. - auto
- Words may be broken at appropriate hyphenation points either as determined by hyphenation characters inside the word or as determined automatically by a language-appropriate hyphenation resource. Manually-defined hyphenation characters inside a word (see below), if present, take priority over automatically determining hyphenation opportunities within the word.
- manual
-
Words are broken for line-wrapping only where characters inside the word suggest line break opportunities. There are two Unicode character that can be 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.
-
U+00AD (SHY)
A “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.
-
U+2010 (HYPHEN)
Notes
Using explicit potential line breaks will allow the browser to break words where these breaks are defined even if no hyphenation is specified with CSS.
Examples
The following will tell the browser to break words where appropriate (depending on the language rules) and add hyphens where the words are broken. The example does not include vendor prefixes for the sake of brevity. Make sure you add all necessary prefixes as required.
p {
hyphens: auto;
}
And of course in order for the above property to work, we’d set the lang attribute on the html element to the language of our choice.
<html lang="ar">
Live Demo
Have a look at the live demo (please see it in a browser that supports the property full):
View this demo on the Codrops PlaygroundBrowser Support
CSS Hyphenation
Method of controlling when words at the end of lines should be hyphenated using the "hyphens" property.
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 88
- 43
- 10*
- 91
- 17
Mobile / Tablet
- 17
- 130
- No
- 130
- 130
