CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



hyphens

Hyphens are an important aspect of typography and can greatly improve the readability of text. In CSS, hyphens are used to control how words are broken and wrapped when they exceed the width of their container. This can be especially useful for long paragraphs of text, where hyphenation can prevent awkward line breaks and improve the overall appearance of the text.

The hyphenation process involves breaking a word into smaller parts and inserting a hyphen between them. This is done automatically by the browser, based on a set of rules that determine where the word can be broken. These rules take into account the language of the text, as well as the specific font and size being used.

In CSS, there are several properties that can be used to control hyphenation:

Hyphens Property

The hyphens property controls whether or not hyphenation is enabled for a particular element. It can be set to one of three values:

  • none: Hyphenation is disabled.
  • auto: Hyphenation is enabled, and the browser will automatically insert hyphens where necessary.
  • manual: Hyphenation is enabled, but the developer can specify exactly where hyphens should be inserted using the hyphenate-character property.

Here's an example of how to use the hyphens property:

  <p style="hyphens: auto;">
    This is a long paragraph of text that will be automatically hyphenated by the browser.
  </p>

Hyphenate-Character Property

The hyphenate-character property is used to specify the character that should be used to indicate where a word has been hyphenated. By default, the browser will use a hyphen (-) character, but this can be changed to any other character using the hyphenate-character property.

Here's an example of how to use the hyphenate-character property:

  <p style="hyphens: manual; hyphenate-character: \u2014;">
    This is a long paragraph of text that will be hyphenated manually using an em dash (&mdash;).
  </p>

Word-Break Property

The word-break property controls how words are broken and wrapped when they exceed the width of their container. It can be set to one of four values:

  • normal: Words are broken at allowed break points, and wrapped to the next line if necessary.
  • break-all: Words are broken at any point, even if it means breaking in the middle of a word.
  • keep-all: Words are not broken, even if it means exceeding the width of the container.
  • break-word: Words are broken at allowed break points, but if there are no allowed break points, the word is broken at the nearest point.

Here's an example of how to use the word-break property:

  <p style="word-break: break-all;">
    This is a long paragraph of text that will be broken at any point, even if it means breaking in the middle of a word.
  </p>

Reference

Activity