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

[andreubotella]

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>

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>

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;
  /* ... */
}

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>

cc @frivoal @bfgeek @emilio

[andreubotella]

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?

[frivoal]

I've been going back and forth about this, and I think we should mostly keep the existing definition, but make an exception allowing for the anchor of out of flow elements (floats or abspos) and invisible lines between the last line and the clamp point.

I think the alternatives would be:

• have the ellipsis in the last line anyway, regardless of subsequent content

  If there is content after the last line box and before the clamp point, it can get quite strange to put the ellipsis on the last line anyway: Imagine a (block) image, a table, a flexbox… having the ellipsis, then some more content, then the break, is confusing.

  More over, as currently defined, this is an inheritable property, which affects all block containers. If we don't limit ourselves to the line immediately before the clamp point, then the last line of each clamped block would get an ellipsis, which would be very wrong in case of nested blocks.