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.
Code from video: https://gist.github.com/prof3ssorSt3v...
On this page of the site you can watch the video online Truncating Text Inside Elements with CSS or JS with a duration of hours minute second in good quality, which was uploaded by the user Steve Griffith - Prof3ssorSt3v3 01 June 2021, share the link with friends and acquaintances, this video has already been watched 4,931 times on youtube and it was liked by 126 viewers. Enjoy your viewing!
