[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.

  <style>
  .clamp { line-clamp: 3; }
  </sytle>
  <div class=clamp>
    Line 1
    <div>Line 2
      <div>Line 3
        <div>Line 4</div>
      </div>
    </div>
  </div>
  

  would result in

  Line 1…
  Line 2…
  Line 3…
  

  as each line, in its own container, is the last line before the clamp point (though not immediately).

• drop content from the end until the last thing is a line.
  Seems wasteful. If there's content and room to display the content, why not show it?

• if the last thing isn't a line, and there's room for a line, add one, and put the ellipsis there.
  I think this is going to run into a ton of complexity and corner cases, without even being clear that it's always desirable.

We could also change the property to be non inherited, and to apply to clamp containers / fragmentation containers only, instead of of block containers. It's not really clear that would help with this issue though. The behavior in case of nested formatting context would have to be described differently, and would likely behave differently at least in some cases, but the fundamental problem asked in this issue would remain.

So, all in all, I suspect we want to keep the current definition, but clarify "immediately preceding" to mean something like there being no content between that last line and the clamp point, other than out of flow content.