Truncating Text Inside Elements with CSS or JS

There are many times when you need to be able to constrain or limit or truncate text within an HTML element. With CSS there are a couple ways to do this.
I have an older video that explains how you can use the ellipsis and truncate text on a single line using just CSS.
This video explains the -webkit-line-clamp property that can be used to clamping the text in a block element to a specific number of lines. CSS can automatically add the ellipsis here too.
The majority of this video explains how to build a fallback with JavaScript. To be able to do this with JS we need to be able to calculate the approximate width of the average character too. So, the script here delves into some text-metric calculations.

[astrosticks]

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

[boudyhesham]

loved it steve as always great work <3

[hammadahmad]

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

[ofekezra]

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)

[simple]

sir please make videos on react huge request

[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.