Stop word breaks in rich text component

I am rebuilding apps from the classic to new format. In the classic app the text in Rich Text components does not break words in the middle (ie the whole word moves to a new line).

In the new version the word con be divided in a strange position with a hyphen (ie some on one line and some on the next line). Can I stop this?

On my plan I can add additional CSS if required (ideally for the whole site - not just compnent by component).

I have atttached a screen shot showing what I am trying to avoid.

Thanks

Paul

1 Like

the way I handle this in my apps right now is a template column:

desc

with desc being my content.

I have also languages like German and it can be quite horrible to read with hyphens!

div, p > * {
word-break: keep-all;
hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
}

I don’t know why using body doesn’t work, but you can try the snippet above.

5 Likes

Thanks.

I have tried:

div, p > * { word-break: keep-all; hyphens: none; -webkit-hyphens: none; -ms-hyphens: none;
}

and it does work.

I have also tried:

p {

hyphens: none;

}

and that seems to work too - though I am not sure if it will have odd results elsewhere.

Thanks again.

Paul

1 Like