line-clamp-balance-008.html (1350B)
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-007-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: 4lh; 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 0 24 <div class=balance> 25 1 2 <span>3</span> <span>4</span> 5 6 26 </div> 27 </div> 28 29 <!-- 30 Initially, we are limited to 4lh worth of content, 31 which means we can fit all the content: 32 first, 1lh in the parent div, 33 then one line with some big numbers in the nested div, and a second one with only small ones. 34 Then, when balancing, we move "4" to the second line, 35 which makes it no longer fit, 36 so that line gets clamped away. 37 -->