W3C home > Mailing lists > Public > www-style@w3.org > April 2012

[css-text] Support cropping in the middle of texts using 'text-overflow'

From: Sebastian Zartner <sebastianzartner@gmx.de>
Date: Sat, 14 Apr 2012 09:30:49 +0200
Message-ID: <4F8927A9.700@gmx.de>
To: www-style@w3.org
It doesn't seem that my mail of yesterday landed in the mailing list. It 
was my first one in this list. So I'm sorry if this is listed twice at 
some point.

There's a discussion at https://bugzil.la/740910 about how the CSS 
syntax of related to 'text-overflow' could be enhanced to allow putting 
an ellipsis in the middle of a text.

Currently there are two different approaches:

1. Extend the 'text-overflow' property:
The suggested syntax for this would be:

text-overflow: ( clip | ellipsis | <string> ){1,3} [ <length>(1,2) ] | 
inherit;

where the optional <length> properties would define the minimum width of 
characters to stay (see below).
So as an example you could have:

text-overflow: clip ellipsis clip;

which would render a text with an ellipsis in the middle.

As a text example for this imagine a file name:
this_is_a_very_long_filename.txt

Shrinked to the half of its size it would be:
this_is_…ame.txt


2. Add a new property 'text-overflow-end-offset':
The suggested syntax for this would be:

text-overflow-end-offset: <percentage> | inherit;

where the <percentage> value defines the position of the end ellipsis.

So as an example you could have:

text-overflow: clip ellipsis;
text-overflow-end-offset: 50%;

which would render the text like in the first example.


Additionally we were talking about adding another property 
'text-overflow-min-width', which controls the minimum amount of 
characters to stay when the text is cropped.

The suggested syntax for this would be:

text-overflow-min-width: ( <length> ){1,2} | inherit;

where the <length> values define the minimium length of the text to stay.

So to stay with our example you could write:

text-overflow-min-width: 0 3ch;

So with only space for five characters in our file name example you 
would get:
t…txt


Besides this it was mentioned to define single-value properties for 
'text-overflow'.

text-overflow-start
text-overflow-middle
text-overflow-end
text-overflow-min-width

Any thoughts on this?

Sebastian
Received on Monday, 16 April 2012 10:21:30 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:52 GMT