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:
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>
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 (—).
</p>
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>