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.
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 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.
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.
-
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”
LeMerlot
Great, there are always such little tips - incredibly helpful - why I like to visit your site so often! Many Thanks!
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!
Great, there are always such little tips - incredibly helpful - why I like to visit your site so often! Many Thanks!
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!
In any case, these little tips in "niche topics" are helpful, I just learned something again - thank you very much!
Very nice! : D Thanks for your feedback.
Excellent! Such tips save hours of trying and searching.
Thanks a lot for this
Wonderful. Then I don't hold back and like to post such short tips every now and then. : D