Source code
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-balance-006.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Overflow: `line-clamp` and text-wrap: balance, height based</title>
<link rel="match" href="reference/line-clamp-balance-006-ref.html">
<meta name="assert" content="Checks that balancing does not happens before claming, when working with height based clamping, including with nested blocks.">
<style>
.clamp {
line-clamp: auto;
font-family: monospace;
width: 9.1ch; /* the extra .1 is just a bit of extra wiggle room, in case things aren't sized perfectly. */
line-height: 1;
max-height: 4lh;
}
.balance {
text-wrap: balance;
}
span { font-size: 2em; }
</style>
<p>Test passes if you see numbers up to 8 (and no further) below.
<div class="clamp">
0
<div class=balance>
1 2 <span>3</span> <span>4</span> 5 6 7 8 <span>9</span>
</div>
</div>
<!--
In the nested block, after 1lh worth of content in the parent block.
If balancing happens after clamping, the large "3" and "4" are both on the first line,
and the second line only has small numbers,
so we can fit both lines (up to number 8) within 3 lh.
If the 3 lines are balanced before clamping, (which would be wrong)
3 ends up on the first line and 4 on the second, (and 9 on the 3rd).
As 4 is large, it makes the second line taller,
and then we can only fit 1 line before the clamp point,
up to number 3.
-->