CSS hyphens property

This CSS property is used to control the hyphenation of the text in the block-level elements. It defines how the word is hyphenated if it is too long or when the text wraps across multiple lines.

This property allows us to split the word into two lines to improve the text layout.

Syntax

The values of this CSS property are defined as follows.

Property Values

none: This value does not hyphenate the words. It never hyphenates the words at line breaks or even if the word is too long.

manual: It is the default value that hyphenates the word only when the characters in the word suggest hyphenation opportunities. The two Unicode characters are defined below, which can be used manually to specify the possible line breakpoints in the text.

U+2010 (HYPHEN) - It is the 'hard' hyphen character that specifies the visible line-break opportunity. The hyphen is rendered, even if the line is not broken at that point.

U+00AD (SHY) - It is an invisible 'soft' hyphen. It is not visibly rendered; instead, it spots the place where the word should be required to break. In html, for a soft hyphen, we can use ­.

auto: In this value, the algorithm decides where the words are hyphenated.

initial: It sets the property to its default value.

inherit: It inherits the value from its parent element.

Let's understand this CSS property by using an example.

Example

Output