hyphens

Defintion

The hyphens property in CSS controls the hyphenation of words within a block of text. It specifies whether words can be hyphenated at the end of a line in order to improve the spacing and appearance of the text.

Examples

Enabling hyphenation for a paragraph of text:

<p style="hyphens: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non urna euismod, ultricies nisi vel, fermentum arcu.</p>

Disabling hyphenation for a heading element:

<h1 style="hyphens: none;">This is a heading with a very long title that should not be hyphenated.</h1>

Forcing hyphenation at specific characters using hyphenate-character:

<p style="hyphens: auto; hyphenate-character: \002d;">This is a paragraph of text where hyphenation is allowed, and the hyphenation character is set to a hyphen (-).</p>

Values

Best Practices

• Use hyphens: auto to allow the browser to automatically hyphenate words where needed to improve the spacing and appearance of the text.
• Avoid using hyphens: none unless absolutely necessary, as this can result in uneven spacing and a less visually appealing layout.
• Consider using the <wbr> HTML element or the ­ entity to indicate where hyphenation is allowed in text that is manually hyphenated (hyphens: manual).
• Use hyphenate-character to specify which character should be used for hyphenation, especially if the default hyphen character is not suitable for your language or text. For example, you can use hyphenate-character: \2010 to specify a non-breaking hyphen.
• Test your hyphenation settings in multiple browsers and on different devices to ensure that the text is visually appealing and easy to read.

Browser Compatibility