W3C home > Mailing lists > Public > www-style@w3.org > March 2015

Re: Text Overflow With ...

From: Brad Kemper <brad.kemper@gmail.com>
Date: Tue, 10 Mar 2015 10:15:55 -0700
Cc: W3C WWW Style <www-style@w3.org>
Message-Id: <DA4270E4-A77B-47E8-AB7F-858194575823@gmail.com>
To: Simon Ferndriger <ferndriger.business@gmail.com>


> 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'. 
Received on Tuesday, 10 March 2015 17:16:24 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:30 UTC