WordPress tip: Headings with hyphenation and breaking points

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.

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 the hyphenation is already provided 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 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.

Jen Kleinholz( Founder & Sir Apfelot )

Jens has been running the blog since 2012. He appears as Sir Apfelot for his readers and helps them with problems of a technical nature. In his free time he drives electric unicycles, takes photos (preferably with his iPhone, of course), climbs around in the Hessian mountains or hikes with the family. His articles deal with Apple products, news from the world of drones or solutions for current bugs.