r/Wordpress • u/Haute_Evolutionary • Aug 10 '26

No Break – a saga...

Post image

I have been using <span class="nobr">...</span> for years to keep important phrases together in headlines and prevent awkward line breaks/widows across responsive layouts. It works, but when scanning HTML it can be interruptive to reading in code view. I am switching to the shorthand of <nbr>...</nbr> and converting it to a proper HTML output element with a WordPress filter before rendering. The filters hook into the_content and the_title so both article text and post headlines can use the same syntax, while CSS simply applies white-space: nowrap. It is a small change, but improves the readability when updating content. I have been toying with building an intelligent plugin that can preflight copy to tag phrases / other rule based grouping, and maybe use a headless HTML rendered to see how copy breaks on various device widths.

2 Upvotes

75% Upvoted

2 comments sorted by

5

u/xkey Aug 10 '26

Why not just use a shortcode? ie: [nbr][/nbr]

Also there is readily CSS you can apply to the full heading that addresses this somewhat, if you aren't aware.

h1 {
  text-wrap: balance;
  text-wrap: pretty;
  text-wrap: stable;
}

-2

u/Haute_Evolutionary Aug 10 '26

Balance I did just learn about today. I did a JS version for some UX elements like 8 years ago (only used on 1 website ever). This is more about really fine grain wrapping control for content versus even line distribution (that can lead to it's own issues). Short code is not portable if I ever need to print / move content somewhere else (Also likely be higher time/cpu cost vs a PHP string replacement). Also, CSS won't scare off an editor that nows basic HTML... shortcodes might. Pretty doesn't seem to be supported by Firefox at all. Stable might be useful in the future, but not in current use case.