line-clamp-auto-041.html (937B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Overflow: `line-clamp: auto` zero-height div</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-auto-041-ref.html"> 8 <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"> 9 <style> 10 .clamp { 11 font-family: monospace; 12 line-clamp: auto; 13 max-height: 5lh; 14 line-height: 1; 15 width: 25.2ch; /* the extra .2 is in case things aren't perfectly monospaced */ 16 } 17 span { 18 font-size: 4em; 19 } 20 </style> 21 <div class="clamp"> 22 PASS PASS PASS PASS<br> 23 PASS <span>FAIL!</span><br> 24 FAIL FAIL FAIL FAIL FAIL FAIL 25 FAIL FAIL FAIL FAIL FAIL FAIL 26 FAIL FAIL FAIL FAIL FAIL FAIL 27 FAIL FAIL FAIL FAIL FAIL FAIL 28 FAIL FAIL FAIL FAIL FAIL FAIL 29 </div>