How to get long lines of text to not wrap and enlarge containing div

Design help General
1

I have a simple list of divs containing an image icon and some text. What I am trying to do for narrower screen sizes is to have the long text lines be simply hidden as if they are spilling out the right side of the div. But when you resize this to mobile device size the long line “Wrapping Text Test” gets wrapped below within the div.

Anyone have a solution?

Live Site: http://mobile-nav-test2.webflow.com

Designer Link: https://webflow.com/design/mobile-nav-test2?preview=6577d28fcd5e8f06efed647ba1f3753f

Thanks

JFly

2

Without looking at your site, I’d say use a div with width 100% and overflow hidden, then inside, set a <p> with pixels dimensions in width so it will never wrap, rather bleed outside the div and will be masked by the overflow property.

1 Like
3

Thank you @vincent. That did the trick!