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 webkitlineclamp 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 textmetric calculations.

Code from video: https://gist.github.com/prof3ssorSt3v...