line-clamp-auto-041.html

firefox-main/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-auto-041.html

Enable keyboard shortcuts

Source code

File a bug in Core :: Layout: Scrolling and Overflow

Revision control

Copy as Markdown

Other Tools

Test Info:

This WPT test may be referenced by the following Test IDs:
- /css/css-overflow/line-clamp/line-clamp-auto-041.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<title>CSS Overflow: `line-clamp: auto` zero-height div</title>

<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">

<link rel="match" href="reference/line-clamp-auto-041-ref.html">

<meta name="assert" content="even if inserting the ellipsis makes the last line so much smaller than extra content would fit, don't reclamp to a later point">

<style>

.clamp {

  font-family: monospace;

  line-clamp: auto;

  max-height: 5lh;

  line-height: 1;

  width: 25.2ch; /* the extra .2 is in case things aren't perfectly monospaced */

span {

  font-size: 4em;

</style>

<div class="clamp">

PASS PASS PASS PASS<br>

PASS <span>FAIL!</span><br>

FAIL FAIL FAIL FAIL FAIL FAIL

FAIL FAIL FAIL FAIL FAIL FAIL

FAIL FAIL FAIL FAIL FAIL FAIL

FAIL FAIL FAIL FAIL FAIL FAIL

FAIL FAIL FAIL FAIL FAIL FAIL

</div>