Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-overflow-4] Should block-ellipsis clip ::before/::after text? #11253

Open
fantasai opened this issue Nov 20, 2024 · 2 comments
Open

[css-overflow-4] Should block-ellipsis clip ::before/::after text? #11253

fantasai opened this issue Nov 20, 2024 · 2 comments

Comments

@fantasai
Copy link
Collaborator

One of the use cases for line-clamp etc. is truncating blockquotes, but there's a problem with the end quotation mark getting dropped when the text is ellipsized.

Should we exempt ::before/::after from trunctation and place it after the ellipsis?

Related issue for text-ellipsis: #9541 That one's trickier because you'd need to be tracking the stack of opening/closing punctuation.

@yisibl
Copy link
Contributor

yisibl commented Nov 21, 2024

Yes, it might help us to attach a button style feature after the ellipsis.
This button is a very common pattern in actual web pages or components.

image

See https://vue-clamp.vercel.app

@Loirooriol
Copy link
Contributor

Loirooriol commented Nov 21, 2024

What if the ::after has lots of contents that would increase the number of lines?

I'm also not sure if it makes sense to always do this for ::after, and I could see authors wanting this behavior for a real element (e.g. in @yisibl's example the button should probably be an actual <button> so that it's keyboard navigable and such).

So should we have a property to control this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants