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

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

HTML

<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>

CSS

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

Result

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: 24th September 2023

Support Us