Heading overflowing its flex container

Hey there,

For some reason, this heading is overflowing its flex container:

This is in tablet view.

This only happens when the content of the heading goes long enough without spaces for it to exceed its container. In other words, if I insert a space in $100,000/month, the content will not exceed the container anymore.

If someone could help me with this I’d appreciate it :slight_smile:

Here is my read-only link.

And here is the live site.

It must be something to to with the characters in that first card. Delete the text and manually type it in and it seem to work. I pasted other text in and it worked as well.

I don’t think so. Look, it fixes the issue if I add a space in the text:

CloudApp

@HammerOz or @cyberdave if you would help me with this I’d appreciate it. :slight_smile:

So the best thing to do would be to think of a better way to present the content so you do not have such a long unbroken text string.

Otherwise you will need to add custom code to tell the css to wrap text along the lines of overflow-wrap | CSS-Tricks - CSS-Tricks (test it with an embed on page).

@HammerOz thanks for your response! I tried using that but didn’t get results. However, I just tested using max-width: 100% on the heading and it worked! It helped me to think of that so thank you!

2 Likes