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

Text Overflow With ...

From: Simon Ferndriger <ferndriger.business@gmail.com>
Date: Wed, 04 Mar 2015 12:40:24 +0000
Message-ID: <CAHSm5EPNhUQxCf8EKqAAkuGZ7C81hjT3zVeghT5nWhd2UcOqyQ@mail.gmail.com> (sfid-20150304_125148_306037_A5D2C9A5)
To: W3C WWW Style <www-style@w3.org>
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
Received on Tuesday, 10 March 2015 17:06:29 UTC

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