Open Bug 1720119 Opened 3 years ago Updated 3 years ago

-webkit-line-clamp with a block after the last line doesn't work

Categories

(Core :: CSS Parsing and Computation, defect, P3)

Firefox 89
Unspecified
Windows 10
defect

Tracking

()

UNCONFIRMED

People

(Reporter: christopher, Unassigned)

References

Details

Attachments

(3 files)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Steps to reproduce:

  1. Create a container with three lines of text and an UL list.
  2. Style the container with "-webkit-box-orient: vertical" and "-webkit-line-clamp: 3"

Code Example:
https://codesandbox.io/s/trusting-banzai-7h9pt?file=/index.html

Actual results:

The full text with the content of the ul list will be printed.

Expected results:

Only the first three lines should be printed.

Component: Untriaged → CSS Parsing and Computation
OS: Unspecified → Windows 10
Product: Firefox → Core

This works the same way as Safari doesn't it?

It seems Chromium is recursing into nested non-anonymous blocks, which is rather odd. E.g., if I change the <ul> by a <div>, then Chrome agrees with us because the <div> is a nested flex container, but if I use another block like a <section>, then we disagree again. That's an slightly simpler test-case so will do that.

Summary: -webkit-line-clamp with an ul tag after the last line doesn't work → -webkit-line-clamp with a block after the last line doesn't work
Severity: -- → S3
Priority: -- → P3
Attached file t.html (deleted) —
Attached image Comparision Firefox Nightly / Chromium (deleted) —

Only the first element is taken into account and the rest is totally ignored when it comes to display :block.
If elements are in display: inline or contents, no problem.
With inline-block, in this case, the property doesn't even work anymore.

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: