Text wrapping issue

Question:
I am having an issue where the text in the collapsible text boxes is wrapping and not in the way we want. The word is breaking across lines. See screenshot attached.

Product:
Wix Studio

What are you trying to achieve:
When a word isn’t going to fit on a line, I want it to bump the whole word to the next line.

What have you already tried:
I have tried using word-wrap and word-break properties in CSS. It doesn’t have any impact.

Any thoughts? Appreciate the help!

Hi, megan !!

I believe Wix Studio’s text elements have a responsive “wrap” function. Have you tried using it yet? :thinking:

Same issue as you megan! Adding to this threads in hopes of bumping up the issue.

The text element “wrap” doesnt do a thing. The same effect of letter-breaking instead of word-breaking happens even if you have a Fixed text box size and manually make it smaller/larger.

Was assisting with some folks having this issue on a Discord thread a while back. One of the things that might help is ensuring any formatting has been stripped out of content if you’re pasting in from another application (or just type content in directly to be safest). To strip formatting when pasting you can press 'Ctrl + Shift + V (Command + Shift + V on Mac). Or you can paste your copy into a plain text document first, then copy in from that.

But rich text fields in Wix do appear to have ‘overflow-wrap: break-word;’ applied by default. So you can try adding a style like: .rich-text__text { overflow-wrap: normal; }, or maybe better yet, add a custom class to the problematic text fields and only apply the style to those.

If you do apply the style, be sure to check the content responsively to ensure content doesn’t ever go sticking outside its container or get truncated depending upon how you have overflow set on the container and how narrow those containers can get.

As @Kenny_H mentioned, the best thing to do is to clear formatting when pasting content, as it sometimes has unintended side effects :slight_smile: