Hyphens - Property CSS

Syntax diagram of hyphens.

Description of the hyphens property.

The property hyphens defines word hyphenation, that is, whether words can be broken at the end of a line. In general, breaking a word is indicated by adding a hyphen at the end of the line.

Word hyphenation allows for a more pleasant layout: it helps adjust the line lengths to make them more consistent. If the text is justified, hyphenation prevents the need to add overly large spaces between words.

Manual hyphenation.

It is always possible to insert the ­ character (soft hyphen) at points where it is appropriate to break words. The soft hyphen is invisible when it is not needed to break the word, but it appears when the word is split at that point.

Do not use the standard hyphen, available on keyboards, to indicate a hyphenation point because this character remains visible even if the word is not broken there. And it only takes the user to change the window width for the hyphenation not to occur in the same places.

Note : there is also a wbr tag that creates a line break opportunity but does not display the hyphen.

The manual solution, however, has several drawbacks:

• It's extremely long and tedious. This makes the manual method unusable for a large text.
• The hyphenation dashes inserted all over the text disrupt searches and spell checking.

Prevent hyphenation.

Sometimes one wants to avoid a line break at a place where it would normally be allowed because there is a space. For example, between a numerical value and its unit. The character   (non-breaking space) appears as a space but does not allow a line break.

Automatic hyphenation setup.

Hyphenation rules depend on the language. For this reason, the behavior of this property with the value auto (the browser determines where to break words) requires the presence of a lang attribute either on the element itself or on one of its parents.

On the other hand, several properties have recently been added to allow precise control over automatic hyphenation:

hyphenate-character :

Defines the character that will be used as a hyphenation mark.

hyphenate-limit-chars :

Sets the minimum number of characters to allow hyphenation of a word.

hyphenate-limit-last :

Defines whether hyphenation is allowed at the end of a column, page, and so on.

hyphenate-limit-lines :

Sets the maximum number of successive lines ending in a hyphenation

hyphenate-limit-zone :

Sets the maximum number of spaces to allow or disallow hyphenation.

Values for hyphens.

• hyphens: manual;

  Words are split at the location of hyphens (-) or soft hyphens (­).

  The value manual is illus­tra­ted by this text.
  It contains soft hyphens in the word "illus­tra­tion".
• hyphens: none;

  Words are not split, even if they contain hyphens or soft hyphens. The only character that allows a line break is therefore a space (or of course the br tag).

  The value none is illus­tra­ted by this text.
  It contains soft hyphens.
• hyphens: auto;

  The placement of word breaks is automatically determined by the browser.

  It works pretty well for French or English languages, provided that the lang attribute is present in the HTML document.

  The value auto is illustrated by this text.
  It does not contain a soft hyphen.
• hyphens: initial; (manual) hyphens: inherit; hyphens: revert; hyphens: revertLayer; hyphens: unset;

  These values ​​are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

Animation of the hyphens property.

The hyphens animation isn't very interesting. There is a small example below with text that contains no manual hyphens. You can change the block dimensions to increase the need for hyphenation.

Simulator.

By adjusting the width of the block below, you can make it necessary to break some words. The CSS property hyphens determines whether these words are broken or not.

Note: the lang attribute has been specified in the HTML code.

(1) Quote from Steve Jobs (founder of Apple).

Browsers compatibility with hyphens.

The first table below shows the possibility of automatic hyphenation on different browsers, as well as the handling of the hyphens property.

But automatic hyphenation requires a dictionary specific to each language: the places in a word where hyphens are allowed do indeed depend on the language. The second table indicates which languages have a hyphenation dictionary available.

Notes:

(1) Requires the presence of the -ms- prefix.

1

Automatic
hyphenation

2

auto
value

Estimated overall support.

96%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari sur IOS

Opéra

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

Chrome

Safari

Firefox

Edge

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Available hyphenation dictionaries.

The table below shows the availability of hyphenation dictionaries by language. We have only shown four of the languages in Europe, but many other dictionaries are available in certain browsers. Refer to the Caniuse website for more complete information.

Notes:

(1) Safari uses different en-GB and en-US dictionaries.

(2) Firefox uses a US dictionary.

1

Latin
dictionary

2

English
dictionnary

3

Irish
dictionary

4

Dutch
dictionary

Estimated overall support.

78%

96%

75%

94%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

2

Chrome

Safari

1

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

2

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

2

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Caniuse

Historic of the hyphens property.

• CSS Text Module Level 3

  This level 3 specification module defines the typographic controls of CSS, that is to say the rules for transforming source text into formatted text, with line breaks. Many properties control the alignment and justification of text, hyphenation rules, spacing of characters or words, grouping of consecutive spaces, etc.
  These rules are often language-dependent, so it is advisable for authors to specify the language in which the text is written (the lang attribute for HTML). It may even be necessary to specify the writing system used, particularly for Korean, Japanese, Mongolian, etc. languages. Otherwise, the typographic formatting will be less precise.

  Regarding hyphens. Level 3 of the specification introduces the hyphens property.
  

  January 27, 1999

  Working Draft.

  

  December 22, 2020

  Candidate Recommendation.

  

  

• CSS Text Module Level 4

  This level 4 of this specification module describes the properties that affect typographic rules: text alignment and justification, word or character spacing, hyphenation rules, etc.
  Compared to level 3, several new properties have been added, particularly concerning line breaks, hyphenation, spacing before and/or after the text, etc.

  Regarding hyphens. No change to the hyphens property.
  

  September 22, 2015

  Working Draft.

  

  

  

See also, regarding text management.

Automatic text hyphenation is a feature described in the module CSS Text Module, as well as everything related to text management: alignment, overflow, spacing, etc. In this standard, you will find the description of the property hyphens and the following properties:

Properties:

⚠

hanging-punctuation

Sets suspended punctuation (characters allowed to overflow into the margin).

hyphenate-character

Defines the character that will be used as a hyphenation mark.

⚠

hyphenate-limit-chars

Sets the minimum number of characters to allow hyphenation of a word.

⚠

hyphenate-limit-last

Defines whether hyphenation is allowed at the end of a column, page, and so on.

⚠

hyphenate-limit-lines

Sets the maximum number of successive lines ending in a hyphenation

⚠

hyphenate-limit-zone

Sets the maximum number of spaces to allow or disallow hyphenation.

Hyphens

Defines whether words can be hyphenated at the end of a line. The hyphenation of the words gives a more pleasant layout but can be annoying in some cases.

letter-spacing

Sets the letter Spacing.

line-break

Defines line breaks for the CJK languages (Chinese, Japanese, Korean).

⚠

line-padding

Adds a space at the beginning and end of lines.

overflow-wrap

Word breaking for CJK languages and a few others.

tab-size

Définit la taille des caractères de tabulation.

text-align

Specifies how the element's text should be aligned.

⚠

text-align-all

Defines the alignment of the lines of a text (synonym for text-align).

text-align-last

Sets the alignment of the last line of paragraphs.

⚠

text-autospace

Defines the space between adjacent characters (usable for CJK languages).

text-indent

Defines the indentation of the first line of paragraphs.

⚠

text-justify

Select the method used to justify the text: spacing between words or between letters.

✗

text-space-collapse

Defines how to handle spaces and multiple spaces in text.

✗

text-space-trim

Defines whether spaces at the beginning and end of the element's text should be kept or removed.

⚠

text-spacing

Short hand property for text-spacing-trim and text-autospace. Groups character spacing information for CJK languages.

⚠

text-spacing-trim

Sets the spacing around CJK punctuation characters.

text-transform

Sets the text case (lowercase, uppercase, small caps...).

⚠

text-wrap

Defines the handling of text wraps.

text-wrap-mode

Defines whether newlines are allowed in a container.

text-wrap-style

Defines how line breaks will be made.

white-space

Defines how multiple spaces and carriage returns are restored.

white-space-collapse

Defines how successive spaces and newlines should be treated.

⚠

white-space-trim

⚠

word-boundary-detection

✗

word-boundary-expansion

word-break

⚠

word-space-transform

Normalize the spacing characters (CJK writings).

word-spacing

word-wrap

Word breaking for CJK languages and a few others.

⚠

wrap-after

Allows or does not allow line breaks after the box.

⚠

wrap-before

Autorise ou non les sauts de lignes avant la boite.