line-clamp-balance-005.html (1270B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Overflow: `line-clamp` and text-wrap: balance, height based, clamp caused by balance</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-004-ref.html"> 8 <meta name="assert" content="Checks that balancing after claming can cause clamping when working with height based clamping, even if there was no clamp point prior to balancing."> 9 <style> 10 .clamp { 11 line-clamp: auto; 12 font-family: monospace; 13 width: 9.1ch; /* the extra .1 is just a bit of extra wiggle room, in case things aren't sized perfectly. */ 14 line-height: 1; 15 max-height: 3lh; 16 text-wrap: balance; 17 } 18 span { font-size: 2em; } 19 </style> 20 <p>Test passes if you see numbers up to 3 (and no further) below. 21 22 <div class="clamp"> 23 1 2 <span>3</span> <span>4</span> 5 6 24 </div> 25 26 <!-- 27 Initially, we are limited to 3lh worth of content, 28 which means we can fit all the content: 29 first one line with some big numbers, and a second one with only small ones. 30 Then, when balancing, we move "4" to the second line, 31 which makes it no longer fit, 32 so that line gets clamped away. 33 -->