In many written languages, it's possible to break lines between syllables as well as between words. This is often done so that more characters may be placed on a line of text with the goal of having fewer lines in a text area, and thus saving space. In such languages the break is indicated visually with a hyphen ('-').
The CSS Text Module Level 3 defines a
hyphens property to control when hyphens are shown to users and how they behave
when shown. Starting with version 55, Chrome implements the hyphens property.
Per the specification, the hyphens property has three values:
auto. To illustrate this we need to use a soft hyphen (
­) as in the
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
A soft hyphen is one that will only be shown when it occurs at the trailing
margin. How this hyphen renders in Chrome 55 or later depends on the value of
-webkit-hyphens: manual; hyphens: manual;
Combining these gives a result like this:
Notice that the soft hyphen isn't visible. In all cases, when a word containing the soft hyphen fits on a single line, the hypen will be invisible. Now, let's look at how all three values of hyphen behave.
In the first example, the hyphens property is set to
none. This prevents the
soft hyphen from ever being displayed. You can confirm this by adjusting the
window size so that the word 'elit' will not fit in the visible line of text.
In the second example, the hyphens property is set to
manual meaning the soft
hyphen will only appear when the margin breaks the word 'elit'. Again, you can
confirm this by adjusting the window size.
In the third example, the hyphens property is set to
auto. In this case, no
soft hyphen is needed since the user agent will determine hyphen locations
automatically. If you resize the window, you'll see that the browser hyphenates
this example in the same place as in the second, though no soft hyphen is
present. If you continue to shrink the window, you'll see that your browser is
able to break lines between any two syllables in the text.