Flexbox and text overlow Flexbox and text overlow
0.0 0


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.



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


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