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 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&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.

-
Do you like my blog? Then I would be happy to receive a short review on Google. Easy leave something here for a moment - that would be great, thank you!

6 comments

  1. LeMerlot says:

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

    • Jens Kleinholz says:

      Thank you! The feedback from you is also super helpful because I really didn't know whether there was actually any interest in this "niche topic". : D But apparently already ... I'm very happy!

  2. Marcel says:

    In any case, these little tips in "niche topics" are helpful, I've just learned something again - thank you very much!

  3. gS says:

    Excellent! Such tips save hours of trying and searching.
    Thanks a lot for this

Leave a Comment

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