[css-overflow] Invisible line boxes and line-clamp

[andreubotella]

While talking with @kojiishi earlier today, we noticed that the spec text for block-ellipsis and max-lines (which are shorthands of line-clamp) talks about line boxes in general, without explicitly excluding invisible line boxes. But currently every browser ignores invisible line boxes for (-webkit-)line-clamp, clamping at "Line 4" in this example:

<style>
  .clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
</style>
<div class="clamp">
  <div>
    Line 1 <br>
    Line 2 <br>
    Line 3
  </div>
  <div><span></span></div> <!-- Invisible line box! -->
  <div>
    Line 4 <br>
    Line 5
  </div>
</div>

Aside from this, there's the question of how to take into account invisible line boxes when clamping based on a height. With continue: discard it is possible for an invisible line box to be "immediately preceding a region break" (see also #10868), which per the spec means it should be ellipsized. However, it would be very unexpected to have an ellipsis placed there. With continue: discard, I think the previous line box, if there is one, should have the ellipsis.

For continue: collapse, in TPAC we agreed that this variant of line-clamp would only allow clamping immediately after a line box, whereas continue: discard could clamp between lineless blocks (see #10816 (comment)). This should be changed to only allow clamping immediately after a visible line box.

cc @frivoal @emilio

[frivoal]

I'd say there's two parts:

• I agree that invisible line boxes should not be counted when you're counting lines to find what the clamp point is.
• if, when clamping by height, you end up with invisible line boxes after the last visible one, what happens to them is part of issue [css-overflow] What counts as "immediately preceding" for block-ellipsis? #10868, so we don't have to handle it separately here (but yes, if we go with the logic discussed at TPAC of only clamping directly after lines even when going by height, then it needs to be visible lines)

[frivoal]

Well, maybe a third part:

• the ellipsis can only get added to the last visible line, regardless of whether [css-overflow] What counts as "immediately preceding" for block-ellipsis? #10868 allows invisible lines to exist after the last visible one in some cases (height-based continue: discard)

[fantasai]

The spec for invisible line boxes says:

Such boxes must be treated as zero-height line boxes for the purposes of determining the positions of any descendant content (such as absolutely positioned boxes), and both the line box and its in-flow content must be treated as not existing for any other layout or rendering purpose.

We don't want to mention invisible line boxes everywhere we mention line boxes. That would make our specs unnecessarily hard to read. These are effectively display: none except as mentioned in this specific paragraph: they do not exist for any other purpose. You cannot count them. You cannot measure them. You cannot introspect their content. You cannot insert ellipses into them. They just don't exist.