Hello,So I am not sure why this is happing. I used the same template for two different pages. On one page the type within a div breaks to multiple lines as expected, and on the other page, the type does not break to another line but gets cut off. The settings are identical for each page so I am confused as to why this occurs. I would expect that the word "infographics" would simply be hyphenated instead of being cut off.

Can anyone offer a solution / help? Reducing the type size is really not an option, I am sure I am just doing something wrong.

Oh sorry, I forgot to do that. I've added the link. Btw, is there a way to link to a specific page with the sharable read-only link? Not sure if that's a dumb question or not, but it always just opens the site on the home screen, which might make it difficult for someone to find the page with the actual issue...

Thanks! Yeah I just don't get it. It's driving me mad. I'm a designer, but I love Webflow because as I build these pages, I at least am getting some foundational knowledge. Unfortunately, I just don't know enough to be able to address things like this and then I waste so much time to figure it out.

Ok, I am thinking maybe I need more coffee, but what do you mean by sentences break but words don't? How is one different than another? I am guessing I am being dumb right now, but I still don't understand.

I guess what is confusing me is that every program from Google Docs to Photoshop that I use, when type reaches the end of whatever bounding box contains it, will break to the next line, whether it is by hyphenating a word or simply dropping the whole word to the next line. I have never come across something where it just gets cut off.

But word breaking shouldn't be done like this. This is an improper break. Should break before the p or after the "i".

That's part of the reason you never ever justify text on the web. Because browsers have no clues what the text is made of and will be incapable of breaking properly thus maintaining an even space between words. The results are horrendous.

The issue is you're styling a TITLE ELEMENT and you are going to allow a word to break? Readability of titles is essential and not always a question of size. One rule should be don't put words that could be longer than the container the title is in. So your longer word must always fit. So just do that, adapt the size of the title for this device, for any word to fit.

Yes, I could adapt a character count, but that is always the problem with responsive design. Changing the one header size will have effects on the modular type scale for the rest of the site.

So if 98% of the titles fit and look great at say 2.5 em, but there is one title that doesn't fit and only will work if reduced to 1.75 em, I can't justify making all the other's 1.75 and reduce the visual impact to get it to fit.

BUT, now that I understand how it treats the flow of words, I can better plan for it in the future. I greatly thank both of you for your help, it has saved me a lot of potential wasted time today!

That's true. I guess I meant from a visual standard. It's wonky to me if you visit one page and the header is one size, but then on another page it dramatically changes in size. The lesson here is definitely live by content first and plan ahead.