Text Overflow With ...

A really great CSS enhancement would be, if I could tell a specific tag, to
cut the containing text to its maximal width and add 3 dots at the end.

Currently, we use JavaScript plugins to do this job, but especially on
mobile devices with rotating displays and in general dynamic content, the
JavaScript would constantly need to recalculate and rerender the text -
which is not very efficient.

So, for example, if I have this tag:

<var>
http://www.example.com/this/is/a/very/large/url/which/does/not/break/into/several/lines/and/does/not/fit/into-this-current-mobile-screen-at-all-which-is-why-it-needs-to-be-cut-and-extended-with-3-dots
</var>

if I could set the following CSS:
var {
  text-overflow:cut;
  text-overflow-after:'...';
  /* or any similar syntax */
}

It would kindly generate the following (result depending on current screen
width/orientation):
<var>http://www.example.com/this/is/a/very/large/url/which/does/...</var>

Actually, it would more or less do the same as "overflow:hidden", with the
difference of adding the 3 dots at the end which are important for the user
to know that it would go on.

Basically, I think, it should the job of a CSS to know how something gets
displayed.


Thank you for your consideration
- Simon