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

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>