CSS Almanac → Properties → H → hyphenate-character

hyphenate-character

Sunkanmi Fafowora on Apr 25, 2025

The CSS hyphenate-character property in CSS adds a hyphen or custom string at the end of a text line that wraps to the next line.

Similarly, a hyphen can join two individual words or be used as a connector to a word on a new line when there isn’t enough space — but only when the conditions for hyphenation have been satisfied.

p {
  font-size: 1.5rem;
  hyphens: manual;
  -webkit-hyphenate-character: "-"; /* Legacy Safari, Chrome, Firefox */
  hyphenate-character: "-";
}

The CSS hyphenate-character property is defined in the CSS Text Module Level 4 specification which is still in its Working Draft status, meaning that the draft document can still change between now and when it becomes a formal candidate recommendation.

Syntax

hyphenate-character: [auto | <string>]{1}

Initial value: auto
Applies to: any text
Inherited: yes
Percentages: n/a
Computed value: specified keyword
Animation type: discrete

Values

/* Keyword Values */
hyphenate-character: auto;
hyphenate-character: <string>;

/* <string> - this includes any character or multiple characters, even an emoji */
hyphenate-character: "";
hyphenate-character: "-";
hyphenate-character: "";
hyphenate-character: "-+";
hyphenate-character: "⏭🔥";

`auto`

This value tells the browser that it can insert the best hyphen that makes sense for the current language. You’re reading this article in English, so if we used the auto value, the hyphen character, ‐ or (&hyphen;), is what you’d see when hyphenation occurs at the end of a line of text.

If the current page is set in a different language, then the browser could decide to use a different character that aligns with that language. Here’s a table from the specification denoting how hyphenation occurs in different languages:

Language	Text	Before	After
English	Unbroken	Un‐	broken
Dutch	cafeetje	café‐	tje
Hungarian	Összeg	Ösz‐	szeg
Mandarin	tú’àn	tú‐	àn
àizēng‐fēnmíng	àizēng‐	‐fēnmíng
Uyghur	داميدى	دامي‍ـ	‍دى

`<string>`

Don’t want the browser to decide which character to use when hyphenating words? The <string> lets you set what character to use.

The string can be any value, even an emoji. Although, the only language I think an emoji hyphenation to make sense is Simlish from the SIMS games.

Take note that applying setting hyphenate-character value to an empty string ("") in the manual way causes the browser to break the word exactly where the  character is applied but without showing it. However, when it’s automated, the browser automatically applies a hyphen at specific breakpoints in words as shown below.

Enabling hyphens

Well, there’s the automated way and the manual way.

Automated

The automated way lets the browser choose when and where hyphenation happens, and browsers vary in how they determine that. Whatever the case, there are two ingredients we need to enable it.

The first ingredient is to set the language (lang) attribute. We can technically apply this on an HTML element, but it’s a best practice to set it on the <html> element so assistive technology, like screen readers, have more context when announcing content.

<html lang="en">

That sets the language, which is English (en). But you know how English can be a little different depending on the country you’re in? Like how the England says “loo” instead of “bathroom”. There’s nuance to how hyphens are implemented too, and we can add a “region” to the lang attribute to zero-in on a language area.

<html lang="en-US">

That’s the United States, of course, but most browsers will make that assumption right off the bat. Some other examples:

<html lang="en-CA"> <!-- English (Canadian) -->
<html lang="pt-BR"> <!-- Portuguese (Brazillian) -->
<html lang="zh-CN"> <!-- Chinese (Simplified) -->

The second ingredient? Turn it on in CSS!

-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;

Notice the -ms- and -webkit- prefixed versions in there, which is needed to support Safari and older versions of Edge.

The CSS Text Level 3 specification does not define the exact rules for hyphenation. Instead, browsers are strongly encouraged to optimize their choice of breakpoints and to choose language-appropriate hyphenation points.

Manual

The manual way gives us a little more control over where hyphenation takes place. So, we still have the lang attribute set on the <html> element like we did in the automated way. The difference is that we set the hyphens property to manual:

-ms-hyphens: manual;
-webkit-hyphens: manual;
hyphens: manual;

Then we need to provide the browser with a hint at where we want hyphenation to happen in the HTML. We can use the “soft hyphen” () to indicate where:

<p>Oldfashioned</p>

This would result in “Oldfashioned” when the text is on a single line, but should tell the browser to hyphenate it as “Old-fashioned” when it runs into two lines.

Writing mode affects hyphenation

Everything we’ve looked at so far is pretty basic English examples or hyphens. But what happens if we were to change the writing-mode to a vertical right-to-left direction?

html {
  writing-mode: vertical-rl;
}

Umm… we lost our hyphens.

Notice how an overflow doesn’t occur because the container is only constrained in the block direction. This just means the text isn’t overflowing that container and doesn’t need to be hyphenated.

But there could easily be an overflow in the inline direction. That’s where we’ll see the hyphens jump into action.