CSS hyphens Property

Description

The hyphensCSS property is used to control the hyphenation of text within a webpage. By default, browsers automatically hyphenate long words to improve text layout and readability. However, the hyphens property allows web developers to have more control over this behavior. It has three possible values: "none" (which disables hyphenation altogether), "manual" (which suggests breakpoints where hyphens should occur using the ­ HTML entity), and "auto" (which lets the browser automatically determine suitable hyphenation points based on language-specific rules and user preferences). This property is particularly useful for fine-tuning the appearance of text in multi-language websites and improving the overall aesthetics of web typography.

Initial value

manual

Applies to

All elements

Inherited

Yes

Computed value

Specified value

Animatable

No

JavaScript syntax

object.style.hyphens

Interactive Demo

hyphens: none;

hyphens: manual;

hyphens: auto;

Syntax

hyphens: none | manual | auto 

Values

• noneWords are not hyphenated, even if characters inside the word explicitly define hyphenation opportunities.
• manualWords are only hyphenated where there are characters inside the word that explicitly suggest hyphenation opportunities.
• autoThe browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses to use.

Example

<dl>

  <dt><code>none</code>: no hyphen; overflow if needed</dt>

  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>

  <dt>

    <code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)

  </dt>

  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>

  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>

  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>

</dl>

dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  hyphens: none;
}
dd.manual {
  hyphens: manual;
}
dd.auto {
  hyphens: auto;
}

Browser Support

The following table will show you the current browser support for the CSS hyphens property.

Desktop
79	55	43	42	5.1

Tablets / Mobile
55	43	42	4.2	6	55

Last updated by CSSPortal on: 2nd January 2024