How to Suggest Hyphenation in HTML and CSS

by Heinz Tschabitscher | May 20, 2026 | Useful Tech

Struggling with awkward line breaks on your website or words spilling out of their assigned containers? Trying to make a headline look good and balanced typographically? Find out here how to suggest hyphenation in HTML and CSS ⤓.

On This Page

First, Let Me Introduce to You a Word

The word I propose is
misurable,
a blend of “measurable,” of course, and “miserable”.

You make of this word what you will (“What is measurable gets…?”). I shall promptly forget about it — except for in respect to its corollary,
obscund.

Lamentably, useful though especially the second word may be, your browser may not yet know how to hyphenate it. Let’s help it out:

How to Suggest Hyphenation for Better Typography in HTML and CSS

Time needed: 1 minute

To mark a potential line breaking point for hyphenation in a word using HTML:

Use the HTML entity  where you want to suggest a location for potential hyphenation in a word.
Here’s what this means: When hyphenation is not disabled, the browser can break the word at this point if the line would otherwise be too long for its container.
Here’s what it looks like: If the line is broken, a hyphen will be inserted at the breaking point; otherwise, nothing is displayed (the soft hyphen character  is not shown).
Line still not breaking: If a line still does not break where suggested, a CSS rule may prevent it (see below) — or the browser does not support hyphenation.
Insert  to mark a potential line breaking point where no hyphen should be inserted even if the line is broken.
Here’s where: This is useful in long URLs, for example, where the hyphen would be confusing and it is amply clear that the address is continued on the next line (e.g., using a different typeface).
Insert a hyphen - to mark a hyphen (and potential line breaking point) that is always visible.
HTML code: You can type out the hyphen as &hyphen; in HTML.
No-break hyphen: You can also insert a non-breaking hyphen in HTML to ensure the line will not break, of course.

From low-phen to hy-phen…
⇆ Buy La De Du a tea
Tips help fuel these email and tech how-tos.

Interaction with the “hyphens” CSS Property

The CSS property “hyphens” controls how the browser deals with line breaking and hyphenation (unless “word-break” overrules it; see below). Its three possible values are “manual” (the default), “none” and “auto”.

`manual`	Words break only where hyphenation is suggested; otherwise, lines break at whitespace. Hyphenation can be suggested with hyphen, soft hyphen and `<wbr />`.
`none`	Words do not break even if hyphenation is suggested; lines break only at whitespace. Soft hyphens and `<wbr />` remain invisible, and hyphens display mid-word while the line continues.
`auto`	Words break at hyphenation points suggested by the browser’s hyphenation dictionary for the language unless a hyphenation point is manually suggested in the word; otherwise, lines break at whitespace. One or more soft hyphens, hyphens or `<wbr />` will turn off automatic hyphenation for the word. The word only breaks at one of the suggested points.

The “word-break” property: Note that two possible values for “word-break” will overrule hyphenation:

`break-all`	Words will break where they would overflow their container regardless of “hyphens” and hyphenation suggestions.
`keep-all`	Words will never break regardless of “hyphens” and hyphenation suggestions.

Browsers do differ in their interpretation of which word-breaking suggestions to take and follow, though.
Their word: MDN have information on the hyphens: CSS property.

Still something askew? How to Mirror Unicode Symbols Using CSS

HTML and CSS Hyphenation Suggestions Example (“Hyphens”)

hyphens: manual;: The word I propose is misurable, a blend of “measurable,” of course, and “miserable”.
hyphens: none;: The word I propose is misurable, a blend of “measurable,” of course, and “miserable”.
hyphens: auto;: The word I propose is misurable, a blend of “measurable,” of course, and “miserable”.

HTML and CSS Source Code

<dl>
  <dt><code>hyphens: manual;</code></dt>
  <dd style="hyphens: manual; width: 225px; border: 1px solid #327a7a">
    The word I propose is <em>mi&shy;surable</em>, a blend of “measurable,” of course, and “miserable”.
  </dd>
  <dt><code>hyphens: none;</code></dt>
  <dd style="hyphens: none; width: 225px; border: 1px solid #327a7a">
    The word I propose is <em>mi&shy;surable</em>, a blend of “measurable,” of course, and “miserable”.
  </dd>
  <dt><code>hyphens: auto;</code></dt>
  <dd style="hyphens: auto; width: 225px; border: 1px solid #327a7a">
    The word I propose is <em>mi&shy;surable</em>, a blend of “measurable,” of course, and “miserable”.
  </dd>
</dl>

HTML and CSS Hyphenation Suggestions Example (“Word-Break”)

word-break:keep-all;: https://ladedu.com/how-to-suggest-hyphenation-in-html-and-css/
word-break:break-all;: https://ladedu.com/how-to-suggest-hyphenation-in-html-and-css/
word-break:normal;: https://ladedu.com/how-to-suggest-hyphenation-in-html-and-css/

HTML and CSS Source Code

<dl>
  <dt><code>word-break:keep-all;</code></dt>
  <dd style="word-break:keep-all; width: 225px; border: 1px solid #327a7a">
    https://ladedu.com<wbr />/how-to-suggest-hyphenation-in-html-and-css/
  </dd>
  <dt><code>word-break:break-all;</code></dt>
  <dd style="word-break:break-all; width: 225px; border: 1px solid #327a7a">
    https://ladedu.com<wbr />/how-to-suggest-hyphenation-in-html-and-css/
  </dd>
  <dt><code>word-break:normal;</code></dt>
  <dd style="word-break:normal; width: 225px; border: 1px solid #327a7a">
    https://ladedu.com<wbr />/how-to-suggest-hyphenation-in-html-and-css/
  </dd>
</dl>