Kadence Splitting Words in the Middle? Fix word-break

The short answer

The Kadence theme sets word-break: break-word on .entry-content. That old value lets the browser break a word anywhere, and, more importantly, lets columns shrink narrower than the longest word. In a tight layout the browser takes that option and splits the word. Replace it with word-break: normal plus overflow-wrap: break-word. That still stops long URLs from overflowing, but keeps ordinary words whole.

Where the rule comes from

This rule is in the Kadence theme’s global stylesheet, global.min.css (version 1.5.2 on the site where I found it):

.entry-content { word-break: break-word; }

It is there for a good reason: a long URL or email address in a post should not burst out of its column on a phone. But break-word is a deprecated value for word-break. Browsers treat it like overflow-wrap: anywhere, and the difference from overflow-wrap: break-word is how the browser works out sizes. With anywhere, every character counts as a possible break point when a grid column, a table cell or a flex item calculates how narrow it is allowed to get.

What it looks like

I reproduced it with a heading in an auto-sized grid column next to a longer paragraph, in Chrome. With the theme’s rule, the column shrank below the width of the word and the heading split. With the fix, the same column kept the words whole:

With word-break: break-word
  Built for
  Commercial Roo
  fing in 2026

With word-break: normal
and overflow-wrap: break-word
  Built for
  Commercial Roofing in
  2026

In an ordinary full-width paragraph you will rarely see it. It shows up in grids, cards, tables, buttons and side-by-side columns, anywhere the browser works out a width from the content inside it.

Why gluing words for widows makes it worse

A widow is one word alone on the last line of a heading or paragraph. The usual cure is to glue the last two words together with a non-breaking space,  , or to wrap them in a span with white-space: nowrap. Either way, two words become one longer unit that cannot break at the space.

With word-break: break-word in place, a long unit is exactly what the browser is allowed to cut anywhere, and columns can shrink below it. The glue that was meant to tidy the last line ends up slicing a word in half, which looks far worse than the widow did.

The fix

.entry-content :is(p, li, h1, h2, h3, h4, h5, h6,
                   figcaption, blockquote) {
  word-break: normal !important;
  overflow-wrap: break-word;
}

overflow-wrap: break-word still breaks a string that cannot fit on a line by itself, like a long URL, so you keep the protection the theme wanted. What it does not do is change a column’s minimum width, so ordinary words are never split just to make a column narrower.

Add it in Appearance, Customize, Additional CSS, or in a child theme. If you would rather not touch the whole site, scope it to the areas where you glue words.

Find every place that sets it

Kadence may not be the only source. Page builders, block plugins and child themes sometimes add their own word-break rules. In Chrome, right-click a split word, choose Inspect, and open the Computed tab: it shows the word-break value that won and the stylesheet it came from.

Make the nowrap span neutral

If you glue with a span rather than a non-breaking space, give the span a class that does nothing except stop wrapping, and make it inherit everything else. Otherwise component CSS such as a rule for .card a span will restyle it, and the last two words of a button suddenly change size.

.nw {
  white-space: nowrap !important;
  display: inline !important;
  font: inherit !important;
  text-transform: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

Three more things I learned the hard way

• Do not glue twice. If a heading already ends with a hand-placed non-breaking space, an automatic glue step should leave it alone, or three words end up locked together.
• Chrome can break at the edge of a nowrap span. When a word sits just outside a span, pull it inside the span rather than relying on a non-breaking space next to it.
• Glue cannot fix a column that is too narrow. If a glued pair is wider than the column, something has to give. Shorten the words, let the layout stack on phones, or drop the glue for that heading.

How to check it

Check at several widths, not one: 1440, 1024, 768, 600, 414, 375 and 360 pixels. The breaks move every time a column changes width, so a page that is perfect at one size can split a word at the next. A short script that walks the text and records where each line starts finds them faster than scrolling.

Typography fixes like this are small, but they are the details that make a site look finished. It is the kind of work I do as a Louisville WordPress developer, and if something on your site is visibly broken, WordPress repair is the place to start.

Frequently asked questions

Will this let long URLs overflow on phones?

No. overflow-wrap: break-word still breaks a long URL or email address that cannot fit on its own line. It only stops ordinary words being split to make a column narrower.

Is this a bug in Kadence?

It is a theme default that makes sense for long links and does not expect glued words. It is easy to override in Additional CSS or a child theme.

Should I use hyphens: auto instead?

Automatic hyphenation adds hyphens at line ends, which many people, me included, do not want in headings. It also depends on the page’s language setting. Fixing word-break is the cleaner first step.

Does this only happen with Kadence?

No. Any theme or plugin that sets word-break: break-word can cause it. Search your stylesheets for that value.

Will the fix change how my paragraphs wrap?

Ordinary paragraphs wrap the same way. The difference shows in grids, cards, tables and buttons, where the browser calculates widths from the content.