Word-break in CSS

anthy · January 22, 2024, 3:03pm

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.

sinanisler · January 22, 2024, 3:27pm

anthy · January 22, 2024, 4:33pm

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

aslotta · January 22, 2024, 4:44pm

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

%root% {
  word-break: normal;
}

Best,

André

sinanisler · January 22, 2024, 4:53pm

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

anthy · January 22, 2024, 5:02pm

Hi André

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

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.

Bests
Antonio

aslotta · February 9, 2024, 10:55am

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:

Hypothekarforderungen

Best,

André