Text breaking in the middle of a word

Hi,

I know the basics of Webflow but I was doing a full redesign of my website and decided it would be best to hire someone to create it for me. He used CMS Collections which I’m not as familiar with. The headers that are tied to the CMS Collections keep breaking in the middle of the words. Text breaking is set to “normal” and the headers look fine in the editor view, but they’re breaking on the live site. Does anyone know how to fix this?


Here is my public share link: Webflow - Azusa McWilliams Designer | Illustrator

hi @Azusaann your request has nothing to do with CMS. You are using on h3 external SplitType library.

The results is that words are not the “words” but these words like are actually lists of letters wrapped in div elements. That is why word wrapping doesn’t have any effect.

This lib is pretty old and not touched for 2 years. All you can do is to read documentation and see if is there solution to this. It should be.

Generally speaking about principle:

Each word is split to letters and each letter is wrapped in div element set as `inline-block. After is applied GSAP animation and breaks between"words" are generated on the fly artificially.

This means that these “words” are not a words that CSS will recognise. The issue is that these “words” should be wrapped together in other div which can be set to eg: inline-block or flex-wrap: nowrap etc.

Good luck

EDIT: I have checked issues for this lib and on the very top is this

1 Like

hi @Azusaann I have this morning created similar stagger effects with a few lines of code just as POC that you do not need library for this stagger. Feel free to use it and customise to your expectations.

Amazing, thank you! I’ll try this out

1 Like

One thing to try is to add a little custom CSS to prevent the headers from breaking in the middle of words. You can use the word-break property set to keep-all or break-word in your site’s custom code section: .your-header-class { word-break: keep-all; } Replace .your-header-class with the actual class name of your headers. This should help keep the text from breaking awkwardly. Hope this helps!

hi @KarleeSellers Only reason to this comment it to clarify for anyone who is not coder as your response can be confusing. If you have read my response you will find that your comment doesn’t make any help as there are no strings means any CSS text wrap method will have no impact on single letter.