Spec-Zone.ru › CSS

`hyphens` CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It's been available across browsers since September 2023.

The hyphens CSS property specifies how words should be hyphenated when text wraps across multiple lines.

Try it

hyphens: none;

hyphens: manual;

hyphens: auto;

<section id="default-example">
  <p id="example-element">An extra­ordinarily long English word!</p>
</section>

#example-element {
  border: 2px dashed #999999;
  font-size: 1.5rem;
  text-align: left;
  width: 7rem;
}

The example text "An extraordinarily long English word!" contains the hidden &shy; (soft hyphen) character: An extra&shy;ordinarily long English word!. This character is used to indicate a potential place to insert a hyphen when hyphens: manual; is specified.

Syntax

/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;

/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: revert;
hyphens: revert-layer;
hyphens: unset;

Values

This property is specified as one of the following keyword values:

none
Words are not broken at line breaks, even if characters inside the words suggest line break points. Lines will only wrap at whitespace.
manual
Default value. Words are broken for line-wrapping only where characters inside the word suggest line break opportunities. See Suggesting line break opportunities below for details.
auto
The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. However, suggested line break opportunities (see Suggesting line break opportunities below) will override automatic break point selection when present.

Description

The hyphens property can be used to define how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.

Hyphenation rules are language-specific. In HTML, the language is determined by the lang attribute. Browsers will only hyphenate if this attribute is present and the appropriate hyphenation dictionary is available. The auto setting's behavior depends on the language being properly tagged to select the appropriate hyphenation rules.

In XML, the xml:lang attribute must be used. The specification does not define rules for hyphenation in XML content, so the exact hyphenation may vary from browser to browser.

The hyphenate-character property can be used to specify an alternative hyphenation character to use at the end of the line, instead of the default language-specific hyphenation character.

If you apply word-break: break-all then no hyphens are shown, even if the word breaks at a hyphenation point. If you apply text-wrap-mode: nowrap, no wrapping occurs, so no hyphens will appear.

Suggesting line break opportunities

There are two Unicode characters used to manually specify potential line break points within text:

U+2010 (HYPHEN)
The "hard" hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered.
U+00AD (SHY)
An invisible, "soft" hyphen. This character is not rendered visibly; instead, it marks a place where the browser should break the word if hyphenation is necessary. In HTML, use &shy; to insert a soft hyphen.

Note: When the HTML <wbr> element leads to a line break, no hyphen is added.

Formal definition

Initial value manual
Applies to all elements
Inherited yes
Computed value as specified
Animation type discrete

Formal syntax

hyphens = 
  none |
  manual |
  auto

Examples

Basic example

This example demonstrates the three values of the hyphens property.

HTML

We include three <dd> elements containing the same text but with three different classes.

<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

Each of the three classes is set to a different hyphens value.

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

Result

Specifications

Specification
CSS Text Module Level 3
# propdef-hyphens

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet WebView Android WebView on iOS
hyphens
55
13
79
79
12–79Only works if the specified language is the same as the language of the underlying OS.
43
6
42
15
17
5.1
55
18
43
6
42
14
17
4.2
6.0
1.0
55
4.4
17
4.2
auto
88
55–88Only supported on macOS.
88
79–88Only supported on macOS.
6
74
42–74Only supported on macOS.
5.1
55
6
42
4.2
6.0
55
4.2
language_afrikaans
112
112
8
98
No
112
8
75
No
23.0
112
No
language_albanian
112
112
No
98
No
112
No
75
No
23.0
112
No
language_amharic
112
112
No
98
No
112
No
75
No
23.0
112
No
language_armenian
87
87
No
73
No
87
No
62
No
14.0
87
No
language_assamese
87
87
No
73
No
87
No
62
No
14.0
87
No
language_basque
87
87
No
73
No
87
No
62
No
14.0
87
No
language_belarusian
87
87
No
73
No
87
No
62
No
14.0
87
No
language_bengali
87
87
No
73
No
87
No
62
No
14.0
87
No
language_bosnian
No
No
8
No
No
No
8
No
No
No
No
No
language_bulgarian
87
87
8
73
No
87
8
62
No
14.0
87
No
language_catalan
No
No
8
No
5.1
No
8
No
5
No
No
5
language_croatian
87
87
8
73
9.1
87
8
62
9.3
14.0
87
9.3
language_cyrillic_mongolian
87
87
No
73
No
87
No
62
No
14.0
87
No
language_czech
112
112
130
98
9.1
112
130
75
9.3
23.0
112
9.3
language_danish
87
87
8
73
5.1
87
8
62
5
14.0
87
5
language_dutch
112
112
8
98
5.1
112
8
75
5
23.0
112
5
language_english
55
12
6For English, Firefox uses an en-US dictionary
44
5.1For English, Safari uses different en-GB and en-US dictionaries.
55
6For English, Firefox for Android uses an en-US dictionary
43
5For English, Safari on iOS uses different en-GB and en-US dictionaries.
6.0
55
5For English, WebView on iOS uses different en-GB and en-US dictionaries.
language_esperanto
No
No
8
No
No
No
8
No
No
No
No
No
language_estonian
87
87
8
73
No
87
8
62
No
14.0
87
No
language_ethiopic_script_mul
112
112
No
98
No
112
No
75
No
23.0
112
No
language_ethiopic_script_und
87
87
No
73
No
87
No
62
No
14.0
87
No
language_finnish
No
No
8
No
9.1
No
8
No
9.3
No
No
9.3
language_french
87
87
8
73
5.1
87
8
62
5
14.0
87
5
language_galician
112
112
9
98
No
112
9
75
No
23.0
112
No
language_georgian
112
112
No
98
No
112
No
75
No
23.0
112
No
language_german_reformed_orthography
87
87
8
73
5.1
87
8
62
5
14.0
87
5
language_german_swiss_orthography
87
87
8
73
No
87
8
62
No
14.0
87
No
language_german_traditional_orthography
87
87
8
73
No
87
8
62
No
14.0
87
No
language_gujarati
87
87
No
73
No
87
No
62
No
14.0
87
No
language_hindi
87
87
No
73
No
87
No
62
No
14.0
87
No
language_hungarian
87
87
9
73
9.1
87
9
62
9.3
14.0
87
9.3
language_icelandic
No
No
8
No
No
No
8
No
No
No
No
No
language_interlingua
No
No
8
No
No
No
8
No
No
No
No
No
language_irish
87
87
No
73
No
87
No
62
No
14.0
87
No
language_italian
112
112
9
98
5.1
112
9
75
5
23.0
112
5
language_kannada
87
87
No
73
No
87
No
62
No
14.0
87
No
language_kurmanji
No
No
8
No
No
No
8
No
No
No
No
No
language_latin
87
87
8
73
No
87
8
62
No
14.0
87
No
language_latvian
112
112
No
98
No
112
No
75
No
23.0
112
No
language_lithuanian
112
112
8
98
No
112
8
75
No
23.0
112
No
language_malayalam
87
87
No
73
No
87
No
62
No
14.0
87
No
language_marathi
87
87
No
73
No
87
No
62
No
14.0
87
No
language_modern_greek
112
112
No
98
No
112
No
75
No
23.0
112
No
language_mongolian
No
No
8
No
No
No
8
No
No
No
No
No
language_norwegian_nn
87
87
8
73
No
87
8
62
5
14.0
87
5
language_norwegian_no
87
87
8
73
5.1
87
8
62
5
14.0
87
5
language_old_slavonic
87
87
No
73
No
87
No
62
No
14.0
87
No
language_oriya
87
87
No
73
No
87
No
62
No
14.0
87
No
language_polish
No
No
31
No
9.1
No
31
No
9.3
No
No
9.3
language_portuguese
87
87
8
73
9.1
87
8
62
9.3
14.0
87
9.3
language_punjabi
87
87
No
73
No
87
No
62
No
14.0
87
No
language_russian
112
112
8
98
5.1
112
8
75
5
23.0
112
5
language_slovak
112
112
130
98
No
112
130
75
No
23.0
112
No
language_slovenian
87
87
8
73
No
87
8
62
No
14.0
87
No
language_spanish
87
87
8
73
5.1
87
8
62
5
14.0
87
5
language_swedish
112
112
8
98
5.1
112
8
75
5
23.0
112
5
language_tamil
87
87
No
73
No
87
No
62
No
14.0
87
No
language_telugu
87
87
No
73
No
87
No
62
No
14.0
87
No
language_turkish
No
No
9
No
5.1
No
9
No
5
No
No
5
language_turkmen
87
87
No
73
No
87
No
62
No
14.0
87
No
language_ukrainian
112
112
9
98
9.1
112
9
75
9.3
23.0
112
9.3
language_upper_sorbian
No
No
8
No
No
No
8
No
No
No
No
No
language_welsh
87
87
8
73
No
87
8
62
No
14.0
87
No
manual
88
55–88Only supported on macOS.
88
79–88Only supported on macOS.
6
74
42–74Only supported on macOS.
5.1
55
6
42
4.2
6.0
55
4.2
none
88
55–88Only supported on macOS.
88
79–88Only supported on macOS.
6
74
42–74Only supported on macOS.
5.1
55
6
42
4.2
6.0
55
4.2

See also

  • content
  • overflow-wrap (formerly word-wrap)
  • word-break
  • Guide to wrapping and breaking text
  • CSS text module

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/hyphens

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API