WordPress tip: Headings with hyphenation and breaking points

Hyphenation in WordPress

I had the case today at a customer website that the theme does not break long words in the headline when the website was viewed in mobile view.

Since the headings are centered, you may only see one word on the iPhone with the front and back missing. Of course, that was a state of affairs that I couldn't leave as it was.

With a simple HTML tag you can set up hyphenation points in headings.
With a simple HTML tag you can set up hyphenation points in headings.

Hyphenation in WordPress - the possibilities

The research into the possibilities of hyphenation in WordPress and HTML pages in general needed several solutions, which I would like to present to you here:

Hyphenation using CSS: hyphens

It's hard to believe, but hyphenation is already provided for in CSS. The CSS property "hyphens" can have the values ​​"none", "manual" or "auto".

body {
hyphens: auto;
}

In practice, the value “auto” should be used most often, because in this case the browser itself separates the words.

Attention: In order for the hyphenation to work, the HTML attribute "lang" or "xml: lan" must also be set under XML. Otherwise the browser will not know which language to use to do its job.

Soft hyphae:

If you include the day in a word in a heading, the word will be split at this point if there is not enough space left to display the word completely.

Example:

Nahrungsmittel­­unverträglichkeit

In the case of the soft hyphen, a dividing line is also used.

word break:

Build the day in a word, this word is separated at that point - if necessary - but no hyphen appears.

Example:

Nahrungsmittel<wbr>unverträglichkeit

Non breaking space: preventing separation

Some may be familiar with the term "non-breaking space". This is a space that should not be used for separation. On websites this is done by the "non breaking space" tag: & nsbp;

If this is placed between two words instead of a normal space, the words are always displayed in one line.

Example:

Horst&nbsp;Evers

I hope I was able to show you some news regarding hyphenation in WordPress and HTML with this little excursion. For me it was all new territory - except for the Non Breaking Space, which I already knew.

-
Did you like the article and did the instructions on the blog help you? Then I would be happy if you the blog via a Steady Membership or at Patreon would support.

6 Responses to “WordPress tip: Headings with hyphenation and breaking points”

  1. Great, there are always such little tips - incredibly helpful - why I like to visit your site so often! Many Thanks!

    1. Thank you! Your feedback is also super helpful, because I really didn't know if there was actually any interest in this "niche topic". :D But apparently yes... I'm very happy!

Post a comment

Your e-mail address will not be published. Required fields are marked with * marked

In the Sir Apfelot Blog you will find advice, instructions and reviews on Apple products such as the iPhone, iPad, Apple Watch, AirPods, iMac, Mac Pro, Mac Mini and Mac Studio.