Pagination link too long - how to break just this one word on mobile

Site URL: https://www.welcome-to-utopia.de/blog/blog-post-nine-kn2al-t0WSV

Hello,

I attached a screenshot for better understanding...

The word "Pilzwurzelrevolution" is too long for a small screen.

I would like to break just this one word so it shows like this:

Pilzwurzel-
revolution

anytime the screen get's too small.

Any idea how i can target this?
I only know how to break the word using ­  but now Idea how to target this blog title / pagination link...

Thank you.

On 10/23/2021 at 3:47 PM, ka_scal said:

The word "Pilzwurzelrevolution" is too long for a small screen. I would like to break just this one word

You can add the following to prevent the title overflowing its container and hyphenate it automatically. The browser is free to break words at appropriate hyphenation points, following whatever rules it chooses.

.item-pagination-link .item-pagination-title {
  word-break: break-word;
  word-wrap: break-word;
}

Notes:

1. This 'code' is CSS. Add to Design > Custom CSS.
2. An example of the code being used is shown below.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

Hi Paul,

when I added the suggested code, the result in the backend is perfectly fine. But when I open the life site on my mobile the word is not breaking, even if the content box is obviously too small for the content (see screenshot). Any idea how to solve this?

Thank you.

I have updated. Please try again.