w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.46k stars 658 forks source link

[css-overflow] What counts as "immediately preceding" for `block-ellipsis`? #10868

Open andreubotella opened 1 month ago

andreubotella commented 1 month ago

block-ellipsis, which is one of the properties that line-clamp is a shorthand for, creates an ellipsis on the last line before clamp, if that line box "immediately precedes" the region break. Since max-lines creates a region break after a line box, when that property is used, the immediately preceding line box is clear. But when clamping by height, the interpretation of that isn't always clear.

My expectation is that a line box would get ellipsized if there is no content between it and the clamp point in the box tree, except that ancestor boxes of the line box can end in between:

.clamp {
  line-clamp: auto;
  max-height: calc(5lh + 2 * 5px);  /* account for .inner's border */
  background-color: yellow;
  border: 5px solid black;
  padding: 5px;
}
.inner {
  background-color: orange;
  border: 5px solid brown;
}
<div class="clamp">
  Line 1 <br>
  Line 2 <br>
  Line 3
  <div class="inner">
    Line 4 <br>
    Line 5
  </div>
  Line 6
</div>

image

But there wouldn't be an ellipsis if an entire box sits in between:

.clamp {
  line-clamp: auto;
  max-height: 4lh;
  /* ... */
}
.h {
  height: 1lh;
  background-color: orange;
}
<div class="clamp">
  Line 1 <br>
  Line 2 <br>
  Line 3 <br>
  <div class="h"></div>
  Line 4
</div>

image

My expectation is also that a line box would be ellipsized even it is contained inside a box with a non-overflowing height property. (This does not currently work in my in-progress implementation of continue: collapse in Chromium, though, and it would need some heavy refactoring before it would be possible.)

.clamp {
  line-clamp: auto;
  max-height: calc(6lh + 2 * 5px);
  /* ... */
}
.inner {
  height: 3lh;
  /* ... */
}

image

One interesting question is what to do when there are out-of-flow block-level elements, between the last line box and the clamp point. By the above definition, the line box shouldn't be ellipsized in that case. However, especially for an abspos box which is positioned elsewhere, this might not be intuitive to authors.

.clamp {
  position: relative;
  line-clamp: auto;
  max-height: 4lh;
  /* ... */
}
.abspos {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: orange;
}
<div class="clamp">
  Line 1 <br>
  Line 2 <br>
  Line 3 <br>
  Line 4
  <div class="abspos"></div>
  Line 5
</div>

image

cc @frivoal @bfgeek @emilio

andreubotella commented 2 weeks ago

cc @frivoal @fantasai @emilio @bfgeek

Talking with Florian earlier, it looks like the "immediately preceding" spec text might have been written in the context of clamping by a number of lines, and the possibility of clamping by a height was not considered at that time. Given that, should the last line box before the clamp point always be ellipsized?