WordPress Hyphenation for Responsive Design

You turn on hyphenation in WordPress with one line of CSS: hyphens: auto. For the browser to hyphenate correctly, the page language has to be right. WordPress takes it from "Settings > General > Site Language" and writes it into every page as the lang attribute. Where the CSS line goes depends on your theme: in the Customizer for classic themes, in the Styles of the Site Editor for block themes. Below you will find the code, both ways to add it, line breaks in the block editor and the pitfalls I ran into on this website myself (as of October 30, 2026).

Without hyphenation, long words do not fit on a phone screen. The text runs over the edge and the whole page scrolls sideways. That happened on this website in October 2026: on a narrow phone, the German heading "Barrierefreiheitserklärung" (accessibility statement) was wider than the screen. German compounds make this especially visible, but long URLs or product names cause the same problem in English. Hyphenation is part of a clean responsive WordPress web design.

The right CSS code

This is the block I use as a starting point. It hyphenates body text, lists and headings and catches anything that cannot be hyphenated:

p, li, h1, h2, h3, h4 {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

• hyphens: auto lets the browser break words using the dictionary of the page language. It adds a hyphen at the break.
• -webkit-hyphens: auto is only needed for Safari versions before 17. Since Safari 17 the property works without a prefix, according to the MDN compatibility data. The line does no harm and helps older iPhones.
• overflow-wrap: break-word is the emergency brake for strings no dictionary knows: long URLs, email addresses, part numbers. The browser only breaks them if they would otherwise overflow, and without a hyphen.

What to remove from old tutorials

Many tutorials, including the first version of this article from 2023, still recommend these lines:

-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;

Take them out. According to MDN, word-break: break-all allows a break between any two characters. The browser then breaks words anywhere, without a hyphen, even where the whole word would have fit on the next line. That is the opposite of clean hyphenation. MDN lists word-break: break-word as deprecated, and -ms-word-break was only meant for Internet Explorer. You do not need -moz-hyphens either: Firefox has supported unprefixed hyphens since version 43.

Hyphenate headings on phones only

A hyphenated word reads worse in a heading than in a paragraph. On this website I therefore hyphenate headings only on narrow screens. From tablet width the column is wide enough, and hyphenation is switched off again:

@media (min-width: 768px) {
  h1, h2, h3, h4 {
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}

Do not hyphenate short words

hyphenate-limit-chars sets how long a word must be before the browser hyphenates it, and how many letters stay before and after the hyphen. hyphenate-limit-chars: 6 3 2; means: only words of six letters or more, at least three before and two after the hyphen. According to MDN, Chrome and Edge support it from version 109 and Firefox from version 137, Safari does not yet. Browsers without support simply ignore the line, so it is safe to add.

Why the browser does not hyphenate: the language

hyphens: auto only works if the browser knows the language of the text and has a dictionary for it. If the lang attribute is missing or wrong, nothing happens. Here is how to check:

1. In WordPress, open "Settings > General" and look at "Site Language".
2. Open a page of your website, right-click and choose "View Page Source". At the top, the <html> element shows something like lang="en" or lang="en-US".
3. If it shows a different language than your text, the browser hyphenates by the wrong rules. Either the site language is set incorrectly, or a theme or plugin overrides it.

Note for English sites: according to the MDN compatibility data, Safari uses different dictionaries for British and American English, so en-GB and en-US can break the same word differently. For German-language sites in Switzerland (de-CH), Safari does not support hyphenation by Swiss spelling at all, while Chrome and Firefox do. Check such pages on an iPhone once.

Where the CSS goes in WordPress

Classic theme: the Customizer

Go to "Appearance > Customize" and open "Additional CSS". Paste the code and click "Publish". The preview shows the effect right away when you make the window narrow.

Block theme: Styles in the Site Editor

With block themes such as Twenty Twenty-Five, WordPress hides the Customizer. Here is where you find the field instead:

1. Open "Appearance > Editor" and click "Styles" on the left.
2. Open the three-dot menu at the top right next to "Styles" and choose "Additional CSS".
3. Paste the code and save.

I clicked through this path on October 30, 2026 in a current WordPress installation. Individual block types have their own CSS field under "Styles > Blocks". There you only write hyphens: auto;, without a selector and without curly braces; WordPress adds the block's selector itself. Both are described in the WordPress documentation on Styles, which also contains an important note: this CSS survives theme updates but is cleared when you switch themes.

Child theme

If you already use a child theme, put the code in its style.css. There it is versioned and sits next to your other customizations. A new child theme is not worth it for a single rule, though; the "Additional CSS" field is enough.

Hyphenate specific areas only

If only one element should hyphenate, for example the title in a card, you need its CSS class. Right-click it in the browser and choose "Inspect". The code then shows something like <h3 class="card-title">, and your rule is .card-title { hyphens: auto; }.

What about a plugin?

The WordPress directory has the free plugin Silbentrennung by Marc Tönsing (200+ active installations as of October 30, 2026). It switches on hyphenation for the whole website, based on the language setting. If you cannot or may not add CSS, it does the job. Everyone else can skip the extra plugin: the CSS line does the same and gives you more control.

Hyphenate individual words by hand

For individual words the browser breaks wrongly or not at all, HTML has three characters:

• ­ is a soft hyphen. It is invisible and only shows as a hyphen if the word has to break at that point. With hyphens: auto, it takes precedence over automatic hyphenation.
• <wbr> marks a break opportunity without a hyphen. It suits URLs, file paths and words with slashes.
•   is a non-breaking space. It keeps together what should not be separated, such as "10 EUR" or "§ 3".

In the block editor you add these characters like this: select the block, open the three-dot menu in the toolbar, choose "Edit as HTML" and type the character where you want it. An example from my German articles on accessibility law:

Barrierefreiheits­stärkungs­gesetz

On the page the word looks completely normal, and on a phone it breaks cleanly at the joints: Barrierefreiheits­stärkungs­gesetz.

Soft hyphens and screen readers

Soft hyphens have a catch: they are part of the text, and screen readers read the text aloud. Jan Hellbusch tested this with three screen readers (May 2025, in German). JAWS 2025 stresses a word with soft hyphens as if it were several separate words. Depending on its settings, NVDA 2024.4.2 reads the soft hyphens out as punctuation, which makes the text hard to follow. With VoiceOver he noticed no difference.

My rule from this: use ­ sparingly, for example in a heading with one very long word. For body text hyphens: auto is better, because CSS only changes the display and leaves the text untouched. More on testing with screen readers is in my guide to making WordPress accessible.

Adding a line break in WordPress

In the block editor, every press of Enter starts a new paragraph block. For a line break within the same paragraph, press Shift and Enter. WordPress then inserts a <br>, and the spacing to the next line stays tight. This works well for addresses, lines of a poem or a signature under a text.

If a line break should only apply on large screens, give the <br> a class via "Edit as HTML", for example <br class="desktop-only">, and hide it on phones:

@media (max-width: 767px) {
  .desktop-only { display: none; }
}

Preventing hyphenation

Some words should never be hyphenated: your company name, product names or code. hyphens has two more values for this:

• hyphens: manual only breaks at soft hyphens you have set yourself. This is the browser default.
• hyphens: none does not hyphenate at all, not even at soft hyphens.

For a company name, give the word a class such as <span class="brand"> and write .brand { hyphens: none; white-space: nowrap; }. The second declaration also keeps names with several words on one line.

How to test the result

1. Make it narrow: open the developer tools in Chrome (F12) and switch on device mode. I check every new page at a width of 375 pixels, which matches smaller iPhones.
2. Measure sideways scrolling: type document.documentElement.scrollWidth > window.innerWidth into the console of the developer tools. If it returns true, some element is too wide.
3. Look at it on a real iPhone: Safari hyphenates with its own dictionaries, and the result differs from Chrome.

A pitfall from practice: tables

For tables on this website I first used overflow-wrap: anywhere. The result: the browser broke words in the middle, "Advanced" became "Advan" and "ced" on two lines. MDN explains why: with anywhere, the browser counts every possible break point when it calculates the minimum width of a cell, so columns become as narrow as possible. With break-word this does not happen. For tables and all elements with automatic width I now only use break-word.

Frequently asked questions

How do I turn on hyphenation in WordPress?

Add hyphens: auto; for paragraphs and headings as additional CSS: for classic themes under "Appearance > Customize > Additional CSS", for block themes under "Appearance > Editor > Styles" in the three-dot menu. The site language under "Settings > General" must match your text.

Why does WordPress not hyphenate my words?

Usually the language is wrong: the page source has no lang attribute, or it names a different language. Less often the theme sets hyphens: manual for certain elements, which overrides your rule. Check this with "Inspect" in the browser.

How do I prevent hyphenation with CSS?

With hyphens: none; on the element in question. The browser then does not break the word at all, not even at soft hyphens. With hyphens: manual; it only breaks where you have set ­ yourself.

How do I add a line break in WordPress?

With Shift and Enter. Enter on its own starts a new paragraph block, Shift and Enter adds a line break within the same paragraph.

Do I need a plugin for hyphenation?

No. One line of CSS is enough and gives you more control. A plugin such as "Silbentrennung" is only worth it if you cannot add CSS.

My recommendation

For most WordPress sites the code from the start is enough: hyphens: auto for text and headings, overflow-wrap: break-word as the emergency brake, and headings without hyphenation from tablet width. Then check your most important pages at 375 pixels wide and once on an iPhone. If your site still scrolls sideways on phones or the theme does not cooperate, I am happy to take a look as part of my WordPress support.