Word-break in CSS

Hi there

I am trying to add word-break to an element on my page (the tabs title element) but it’s not working.

I tried adding a class and doing it in the builder, and it does not work.

What am I doing wrong?

I need to set it to normal.

word-break - CSS: Cascading Style Sheets | MDN ?

Yep, this is what I tried, but it’s not applied in frontend.

Hey @anthy,

you’re missing the trailing percentage sign for the root selector:

%root% {
  word-break: normal;



check the dom text with F12 inspector in frontend be sure you are applying the CSS there.

Hi André

I made a typo yes, but this did not solve the issue :confused:

I also tried to add the CSS in the WP-Bricks Settings “Custom Code” tab but nothing.

The green marked letters are part of the previous word. I would like to avoid it.


Hey @anthy,

you probably wanna use hyphens instead of word-break here:

%root% {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;

Alternatively you could specify the word break yourself using the ­ entity:




1 Like