Although the CSS directive text-overflow: ellipsis is quite nice as-is, I'd like to do some string manipulation with JavaScript (to abbreviate certain long strings) whenever a string displayed on the page is being shortened, to avoid the ellipsis symbol if possible. This would be useful since text-overflow: ellipsis always only cuts off characters from the end of a string, and sometimes the most import information is on the end.
This is a somewhat contrived example, but it will illustrate what I mean. If I have a list like so:
- Merchandise Catego...
- Merchandise Catego...
- Merchandise Catego...
- Merchandise Catego...
- Merchandise Catego...
you can't tell that the first one is Merchandise Category 1, the next is Merchandise Category 2, and so on. Normally the problem is not so extreme as in this example, but it does happen that the end of the string contains important information and the middle contains words that could be abbreviated if necessary.
In tihs (contrived) example, "Merchandise" could be abbreviated to "Merch." and if the ellipsis were still being used, "Category" could be abbreviated to "Cat."
How can I trigger Javascript to run when the text-overflow: ellipsis is in effect. (By "in effect" I don't mean the style is applied to an element. I only want to know when that style is causing an element to be shortened and the ellipsis character (three dots) to appear.)
