Streaming live at 10am (PST)

How do I stop text with wrapping from spanning the whole parent div?

I have this heading in my portfolio. It breaks to a new line because the title is wider than its parent’s max width.

Unfortunately for some reason the text element spans the full width, which means that my arrow icon (only shows on hover) is all the way on the right, rather than being next to the text like all my other headings.

How can I fix this?

CleanShot 2021-05-29 at 16.31.31@2x

CleanShot 2021-05-29 at 16.31.41@2x

Here is my site Read-Only: LINK

Max width on the text?

Unfortunately the text already has a max-width, that’s what is causing the “Notification Escalation” to wrap over two lines.

Since these are CMS items, I can’t go and set an arbitrary max-width efficiently for each title. There is actually a heading just below that just barely fits my current max-width, so changing it would just move the problem elsewhere.

Hi @peej there is no natural CSS way to style only one element in CMS collection, here is simple code that allow you to achieve your design.

const menuItems = [...document.querySelectorAll(".folio-home-heading")]
menuItems[0].style.inlineSize = "min-content";

Hope that will work for you

1 Like

Thank you so much, this was exactly what I was looking for!

1 Like