Twitch.tv: Flexbox and text overlow

#1

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!

#2

What do you mean by “collapse”?

#3

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.

#4

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.

#5

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
#6