Javascript/jQuery: Check if text is within viewport of element

Question

I have text within an element whose font size is font-size: 4vw , this means that if the text is too long, only the beginning of the text will remain within the viewport.

eg: |Example Long Text| becomes |Example Lon|. I'm looking to write a script such that rather than do that, it will become |Example L..| to indicate that there is more content. However, I don't know how to check if the text has left the viewport.

Any ideas?

Answer 1

You don't have to use JS to solve this - it can be done with pure CSS using the text-overflow property. This saves you from having to work out some of the complexities of coding this yourself.

Example here: https://jsfiddle.net/37x7jyze/