[css-overflow-3] What does it mean for text-overflow: ellipsis
to clip the first character of a line?
#9545
Labels
css-overflow-3
Current Work
The specification for the
text-overflow
property talks about "clipping" the text to the end of the line box whentext-overflow
is set toclip
. A straightforward reading would seem to imply that the mere presence oftext-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 byoverflow
. This is observable if the block container has inline-end padding. No browser does this, instead letting theoverflow
property clip the text at the padding edge (or outside of it, withoverflow-clip-margin
).The verb "clip" also appears in the spec text for
text-overflow: ellipsis
: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
The text was updated successfully, but these errors were encountered: