CSS hyphens Property
Use hyphens CSS property to know how to hyphenate the words. Learn more about property values and see examples.
The hyphens property defines how words should be hyphenated when text wraps across lines.
The hyphens property can take three values: none, manual, auto. It allows preventing hyphenation or allowing it, or only allow it when certain characters are present.
The rules of hyphenation are not explicitly defined in the specification, so the hyphenation varies from browser to browser.
| Initial Value | none |
|---|---|
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | Object.style.hyphens = "none"; |
Syntax
Syntax of CSS hyphens Property
hyphens: none | manual | auto | initial | inherit;Example of the hyphens property:
Example of CSS hyphens Property with none, manual and auto values
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 55px;
border: 1px solid #666;
}
p.none {
hyphens: none;
}
p.manual {
hyphens: manual;
}
p.auto {
hyphens: auto;
}
</style>
</head>
<body>
<h2>Hyphens property example</h2>
<h3>none</h3>
<p class="none">An extreme­ly lengthy sentence</p>
<h3>manual</h3>
<p class="manual">An extreme­ly lengthy sentence</p>
<h3>auto</h3>
<p class="auto" lang="en">An extreme­ly lengthy sentence</p>
</body>
</html>Result
In the given example all three values are included so as to see the differences.
Browser prefixes are no longer required for modern browsers.
Line break opportunities
With the help of the two Unicode characters below we can manually define potential line break points inside of the text:
U+00AD (SHY/Soft hyphen)
This character is rendered invisibly. It points a place, where the browser must break the word, in the case when we need hyphenation. For insertion of SHY use .
U+2010 (HYPHEN/Hard hyphen)
This character points visible line break possibility. The hyphen is rendered even in the case when the line is not broken at that point.
Values
| Value | Description |
|---|---|
| none | No hyphenation. Words are not broken at line breaks, even if the characters suggest line break points. |
| manual | Words are broken only for line-wrapping where there are line break opportunities inside the word. Words are only hyphenated at ‐ or ­. |
| auto | The browser automatically breaks words at appropriate hyphenation points. Words are hyphenated where the algorithm is deciding. The auto value’s behavior depends on the language. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |
Practice
What is the purpose of the 'hyphens' property in CSS?