line-clamp-balance-012.html (993B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Overflow: `line-clamp` and text-wrap: balance, height based</title> 5 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> 6 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> 7 <link rel="match" href="reference/line-clamp-balance-012-ref.html"> 8 <meta name="assert" content="Checks that balancing in nested IFC happens properly, and is taken into account when finding clamp points."> 9 <style> 10 .clamp { 11 line-clamp: auto; 12 font-family: monospace; 13 line-height: 1; 14 max-height: 8lh; 15 width: 9.1ch; /* the extra .1 is just a bit of extra wiggle room, in case things aren't sized perfectly. */ 16 } 17 .balance { 18 display: flow-root; 19 text-wrap: balance; 20 } 21 span { font-size: 2em; } 22 </style> 23 <p>Test passes if you see numbers up to 12 and not beyond. 24 25 <div class="clamp"> 26 0 27 <div class=balance> 28 1 2 <span>3</span> <span>4</span> 5 6 7 8 <span>9</span> 29 </div> 30 10 11 12 13 14 31 </div>