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-3] What does it mean for text-overflow: ellipsis to clip the first character of a line? #9545

Open
andreubotella opened this issue Nov 1, 2023 · 0 comments
Labels
css-overflow-3 Current Work

Comments

@andreubotella
Copy link
Member

andreubotella commented Nov 1, 2023

The specification for the text-overflow property talks about "clipping" the text to the end of the line box when text-overflow is set to clip. A straightforward reading would seem to imply that the mere presence of text-overflow: clip would cause overflowing text to be clipped at the end of the line box, in addition to the clipping at the padding edge of the block container caused by overflow. This is observable if the block container has inline-end padding. No browser does this, instead letting the overflow property clip the text at the padding edge (or outside of it, with overflow-clip-margin).

The verb "clip" also appears in the spec text for text-overflow: ellipsis:

For the ellipsis value implementations must hide characters and atomic inline-level elements at the end edge of the line as necessary to fit the ellipsis, and place the ellipsis immediately adjacent to the end edge of the remaining inline content. The first character or atomic inline-level element on a line must be clipped rather than ellipsed.

It is clear that the ellipsis would not displace the first character (or atomic inline) as it would others. Furthermore, by the interpretation of "clip" above, it would follow that if the first character by itself is enough to overflow the line box but not the block container's padding edge, then the character itself would not be clipped.

What isn't clear, and what browsers disagree on, is whether an ellipsis would be painted after the first character if it would fit in the padding edge (or overflow clip margin). Webkit and (LayoutNG) Chromium do paint it, while Firefox doesn't. It also seems like legacy layout Chromium didn't paint the ellipsis, and AFAIK this change wasn't noticed.

Test case: https://codepen.io/andreubotella/pen/GRzqGvg

@fantasai fantasai added the css-overflow-3 Current Work label Jan 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-overflow-3 Current Work
Projects
None yet
Development

No branches or pull requests

2 participants