Twitch.tv: Flexbox and text overlow

Hi everyone,

I’m so close to being done but having some trouble figuring out how to get the text to not wrap but to collapse when viewing the app on a cellphone. I’ve been reading and experimenting with this article Flexbox and Truncated Text but no luck.

Thanks!

What do you mean by “collapse”?

Thanks for replying!

Sorry what I meant was how can the text be truncated and have ellipsis at the end:

FreeCodeCamp Greg working on Electron-Vue boilerplate w/ Akira #programming #vuejs #electron

becomes

FreeCodeCamp Greg working on …

if the browser window is narrower than 600 pixels.

I see. The tutorial you linked to should work, but it’s a matter of targeting the correct elements. It looks like you’ll want each a tag inside of the .streamItem elements to be the flex-parent and the text inside that to be the flex-child. It’s going to be a bit messy, but so it goes with vanilla JS.

Ah ok, that makes it a little clearer. It sounds like I wasn’t applying the CSS deep enough. I’ll give that a try.
I thought to challenge myself to learn flexbox since the the JSON part of the challenge has changed a bit. It’s been challenging…

Thanks again

1 Like