Re: Text Overflow With ...

> On Mar 4, 2015, at 4:40 AM, Simon Ferndriger <ferndriger.business@gmail.com> wrote:
> 
> 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

I don't understand how this is different from 'text-overflow: ellipsis'.