search

WICG / proposals

A home for well-formed proposed incubations for the web platform. All proposals welcome.
https://wicg.io/
Other
233 stars 16 forks source link

Add ability to style line-clamp ellipsis with CSS #127

Open collimarco opened 1 year ago

collimarco commented 1 year ago

It would be useful to add a CSS selector to style the three dots (ellipsis) generated by line-clamp. Currently there is no way to do that.

For example: it would be nice to use CSS to add bold or a different color to make the three dots more visible.

tomayac commented 1 year ago

In theory this should already be possible with block-ellipsis, which is one of the components of the (-webkit-)line-clamp shorthand. In practice, it doesn't seem implemented yet, though.

tomayac commented 1 year ago

Oh, wait, sorry, just read that this is not about changing the ellipsis to something else, but styling the ellipsis. So this wishes for something like a ::block-ellipsis CSS pseudo element then I guess…

collimarco commented 1 year ago

So this wishes for something like a ::block-ellipsis CSS pseudo element then I guess…

Yes, exactly. It would be useful to have that! It's what I was suggesting here.

In theory this should already be possible with block-ellipsis, which is one of the components of the (-webkit-)line-clamp shorthand. In practice, it doesn't seem implemented yet, though.

This is also cool, but it doesn't seem supported by any browsers

marcoscaceres commented 9 months ago

@collimarco have you pinged the CSS WG mailing list with this proposal? It might be good to get their eyes on it to drum up some interest (or maybe they are already working on this).

Crissov commented 9 months ago

You can always search for related issues or raise a new one yourself in w3c/csswg-drafts/issues/. The closest I found were https://github.com/w3c/csswg-drafts/issues/8504, https://github.com/w3c/csswg-drafts/issues/9541 and https://github.com/w3c/csswg-drafts/issues/5417

For what it’s worth, there is already a note at the end of section 4 in the css-overflow draft:

Future specifications may extend this feature, for example by providing an ::ellipsis pseudo-element to style the text, or by allowing the selection of a child element of the block to use as either an inline-level or block-level indicator (in which case, it can capture events).