[css3-ui] Styling of text overflow ellipsis

If a block with text-overflow:ellipsis needs to cut off the content and place an ellipsis, the styling of the ellipsis is not affected by the inline styling at the point where the ellipsis is placed.

For example:

<div style="width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
<span style="color: orange">The quick brown fox jumps over the lazy dog.</span>
</div>

Per the current spec ("The ellipsis is styled ... according to the block."), the ellipsis color is black even though it is placed within a span that makes all text orange.  Safari 6.0.3, Firefox 19.0.2, Chrome 25, Opera 12.14, IE 6, and IE 10 are all compliant with this requirement.

I can apply color:orange to the div, but for more complex examples (such as each word having a different color), I would need to guess.

Would it make sense to change the spec so that the ellipsis has the same styling as wherever it is placed?  If this behavior is desired, should a new CSS property be created?

Received on Monday, 25 March 2013 22:55:48 UTC