[text-overflow] [line-clamp] Fix text-overflow: <string> inside line-clamp

andreubotella · chromium-wpt-export-bot · commit e3cea740ff7f · 2025-08-14T21:33:44.000-07:00
The https://crrev.com/c/6773707 CL just recently added support for passing a string to `text-overflow`, which is used as a replacement for the ellipsis added when the line is truncated. In that CL, `LineTruncator` was updated to use the string that was passed to `text-overflow` if there was one. However, `LineTruncator` is also used for the `(-webkit-)line-clamp` ellipses (when the `CSSLineClampLineBreakingEllipsis` runtime feature is disabled), and those should not use the string passed to `text-overflow`. Furthermore, since the `line-clamp` ellipsis can end up placed in descendant inline formatting contexts which don't have the relevant `line-clamp` shorthands, and since `text-overflow` can also be used inside a `line-clamp` container, it can't be known which of those properties caused the line truncation just from the computed styles. This CL fixes this by updating `InlineLayoutAlgorithm::GetLineClampState` so the `kLineClampEllipsis` and `kTextOverflowEllipsis` return values indicate which property caused the ellipsis, rather than the method in which the ellipsis is placed. This is then passed to `LineTruncator` constructor. Bug: 40336192, 41492459 Change-Id: Ifad94fd848492fc46b5548a1df7833f5df69c46a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6845961 Commit-Queue: Andreu Botella <abotella@igalia.com> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1501770}
diff --git a/css/css-overflow/line-clamp/line-clamp-with-text-overflow-string-001.html b/css/css-overflow/line-clamp/line-clamp-with-text-overflow-string-001.html
@@ -15,7 +15,8 @@
   white-space: pre;
   background-color: yellow;
   padding: 0 4px;
-  text-overflow: "-"
+  text-overflow: "-";
+  overflow: hidden;
 }
 </style>
 <div class="clamp">Line 1
diff --git a/css/css-overflow/line-clamp/line-clamp-with-text-overflow-string-002.html b/css/css-overflow/line-clamp/line-clamp-with-text-overflow-string-002.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: line-clamp with text-overflow<string></title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/webkit-line-clamp-005-ref.html">
+<meta name="assert" content="line-clamp should clamp with default ellipsis even if text-overflow has string value. This is the case even if the inline root of the ellipsized line is not the line-clamp container, but a descendant of it.">
+<style>
+.clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  line-clamp: 4;
+  font: 16px / 32px serif;
+  white-space: pre;
+  background-color: yellow;
+  padding: 0 4px;
+  text-overflow: "-";
+  overflow: hidden;
+}
+</style>
+<div class="clamp"><div>Line 1
+Line 2
+Line 3
+Line 4
+Line 5</div></div>
diff --git a/css/css-overflow/line-clamp/line-clamp-with-text-overflow-string-003.html b/css/css-overflow/line-clamp/line-clamp-with-text-overflow-string-003.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: line-clamp with text-overflow<string></title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/line-clamp-with-text-overflow-string-003-ref.html">
+<meta name="assert" content="If text-overflow has a string value, all lines that ellipsize because of that property should use that string as the ellipsis. This should happen even inside of a line-clamp container.">
+<style>
+.clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  line-clamp: 4;
+  font: 16px / 32px monospace;
+  white-space: pre;
+  background-color: yellow;
+  padding: 0 4px;
+  width: 35.1ch;
+  text-overflow: "-";
+  overflow: hidden;
+}
+</style>
+<div class="clamp">Line 1
+Line 2 overflows the line-clamp container
+Line 3
+Line 4
+Line 5</div>
diff --git a/css/css-overflow/line-clamp/reference/line-clamp-with-text-overflow-string-003-ref.html b/css/css-overflow/line-clamp/reference/line-clamp-with-text-overflow-string-003-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+.clamp {
+  font: 16px / 32px monospace;
+  white-space: pre;
+  background-color: yellow;
+  padding: 0 4px;
+  width: 35.1ch;
+}
+</style>
+
+<div class="clamp">Line 1
+Line 2 overflows the line-clamp co-
+Line 3
+Line 4…</div>
