Re: [CSS3-UI] text-overflow:ellipsis (freshly rewritten/expanded and incorporated into editor's draft)

On Jan 21, 2011, at 10:53 PM, Tantek Çelik wrote:

> As planned, I have moved the skeleton definition of
> text-overflow:ellipsis from CSS3-Text[1] to CSS3-UI[2], and then
> expanded it to address new information and details.
> 
> [1] http://dev.w3.org/csswg/css3-text/#text-overflow
> [2] http://dev.w3.org/csswg/css3-ui/#text-overflow  <-- this is the
> one you want.
> 
>> From a variety of sources including:
> 
> * https://bugzilla.mozilla.org/show_bug.cgi?id=312156
> * http://www.w3.org/blog/CSS/2009/11/25/resolutions_84
> * https://developer.mozilla.org/En/CSS/text-overflow
> * http://msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx
> * http://developer.apple.com/library/safari/documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW24
> (anyone know how to create more usable/sharable non-#-abusing URLs for
> WebKit CSS documentation?)
> 
> I've applied the filter of only documenting what appears to be
> interoperably implemented, 

The last sentence, "The ellipsis should be styled consistent with the text being ellipsed," does not seem to be describing what is happening in Webkit. The text that gets replaced can be a different color than its block parent with the text-overflow:ellipsis, but it still uses the parent color, not the text color. Try this in the snippet editor, and then resize the window:

<style>
p { overflow:hidden; text-overflow:ellipsis; font-size:3em; color: purple; }
span { background:yellow; padding-left:2em; color:green; }
</style>

<p>hjadhsfjkdsdjkshfjkshfjjhsjkfh<span>sjkfhsjkfhjksfdsk</span></p>

Received on Saturday, 22 January 2011 16:49:28 UTC