Understanding CSS `hyphens`: Controlling Word Hyphenation for Improved Text Layout
Learn how to use CSS's `hyphens` property to control word hyphenation in your web page text. This tutorial explains the different `hyphens` property values (none, manual, auto), their effects on text layout, and how to use hyphenation to improve the visual appearance and readability of your web pages.
Understanding CSS `hyphens`
The CSS `hyphens` property controls how words are hyphenated (broken across lines) in block-level elements. This helps improve text layout, especially when long words might otherwise overflow their containers.
How `hyphens` Works
Hyphenation is the process of splitting words across lines. The `hyphens` property lets you control whether and how this happens. It's particularly helpful for languages that commonly use hyphens.
Syntax
The syntax is:
hyphens: none | manual | auto | initial | inherit;
Property Values
none: No hyphenation is allowed, regardless of word length or line breaks.manual: (Default) Hyphenation is allowed only where explicitly marked in the text using special characters (see below).auto: The browser's algorithm automatically decides where to hyphenate words.initial: Resets the property to its default value (manual).inherit: Inherits the value from its parent element.
Manual Hyphenation Characters
For `hyphens: manual;`, you can use these characters to indicate where hyphenation is allowed:
U+2010 (HYPHEN) -: A "hard" hyphen; the hyphen is always visible.U+00AD (SHY) -: A "soft" hyphen; the hyphen is only visible if a line break occurs at that point. In HTML, you can represent this with.
Example
This example shows the difference between the `none`, `manual`, and `auto` values. (Note that the "Test it Now" section is a placeholder for a live example illustrating the hyphenation differences.)