Truncating Text Inside Elements with CSS or JS

[@astrosticks]

I was just trying to do this the other day! Thanks for posting!

[@hammadahmad5383]

Hi Steve 😊😊 What font-family are you using in your VS Code?? I really like it...🙂🙂

[@SteveGriffith-Prof3ssorSt3v3]

At different times I have been using 'JetBrains Mono', 'Fira Code', or Menlo

[@hammadahmad5383]

@@SteveGriffith-Prof3ssorSt3v3 Ok Sir, Thanks 🥰

[@boudyhesham5875]

loved it steve as always great work

[@khaledoghli1894]

Thank you hero .

[@kegorfx]

Wow. Cool :)

[@BrendanMetcalfe]

👍👍

[@ofekezra7567]

Hello steve , you make and amazing videos. Can you please make videos about webpack ? (how to create workflow with js and writing in separate files)

[@SteveGriffith-Prof3ssorSt3v3]

Webpack video coming soon

[@ofekezra7567]

@@SteveGriffith-Prof3ssorSt3v3yes!!, thank you sir

[@simple8810]

sir please make videos on react huge request

[@SteveGriffith-Prof3ssorSt3v3]

I already have a playlist on React - kzbin.info/www/bejne/rIWph5psfpeqhKs and React Native - kzbin.info/www/bejne/ipbWdXyMdpdrqK8 I will be adding new content to these lists this summer too.

[@simple8810]

@@SteveGriffith-Prof3ssorSt3v3 Thank You Sir for giving me the link

[@broadshare]

In real life the elements will not always be p tags, think of data coming from Api where you have li, and other html tags along. Everyone running to show the easy unreal case but not actually the full solution.

[@SteveGriffith-Prof3ssorSt3v3]

The tags don't matter. I have many other videos where I talk about traversing the DOM and finding targets in the HTML. Generating the CSS based on the DOM structure (if there is one coming from your API) is another separate topic. If there is HTML inside the data coming from an API then that HTML should be a standard structure that you can plan for in most cases. This video is only about the truncating of the text. Applying this knowledge as part of a larger solution is beyond the scope of this short tutorial.