Truncate '...' text based on viewport width?

How do show first 25 characters of text followed by ‘…’ for CMS text objects?

For example:

“The lazy brown fox jumps over the lazy dog.” (link)

“The lazy brown fox jumps**…**” (link)

This will make article cards more consistent looking.

And then, for exch viewport width:
Desktop - Show 60 characters
Tablet - Show 40 character
Mobile - Show 25 characters