[css-overflow-3] What does it mean for `text-overflow: ellipsis` to clip the first character of a line?
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- Avg merge
- 2d 18h
- Merged PRs (30d)
- 24
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the text-overflow section of the CSS Overflow Level 3 specification and the linked CodePen test case. Compare how WebKit, Chromium LayoutNG, legacy Chromium, and Firefox handle an ellipsis after a first overflowing character. Done means the specification's clipping behavior is clarified and the browser disagreement is resolved or documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Documentation
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100