1. css
  2. /properties
  3. /hyphens



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.


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>


noneWords are not hyphenated.
manualHyphenation is allowed only where explicitly indicated using the <wbr> HTML element or the ­ entity.
autoHyphenation is allowed as needed to improve the spacing and appearance of the text. This is the default value.

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera