line-clamp-021.html (1263B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: line-clamp hidden content is treated as ink overflow</title> 4 <link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> 6 <link rel="match" href="reference/line-clamp-021-ref.html"> 7 <meta name="assert" content="Any overflowing content hidden from paint by line-clamp is treated as ink overflow and therefore doesn't cause the scrollable overflow rectangle to grow."> 8 <style> 9 #scrollContainer { 10 overflow: scroll; 11 font: 16px / 32px serif; 12 height: 3lh; 13 border: 1px solid black; 14 } 15 .clamp { 16 line-clamp: 4; 17 padding: 4px; 18 background-color: yellow; 19 } 20 .pre { 21 white-space: pre; 22 } 23 </style> 24 25 <div id="scrollContainer"> 26 27 <div class="clamp"> 28 <div class="pre">Line 1 29 Line 2 30 Line 3 31 Line 4 32 Line 5 33 Line 6</div> 34 35 <div>Another div</div> 36 37 <table> 38 <tr> 39 <td>A</td> 40 <td>B</td> 41 </tr> 42 <tr> 43 <td>C</td> 44 <td>D</td> 45 </tr> 46 </table> 47 </div> 48 49 </div> 50 51 <script> 52 window.addEventListener("load", () => { 53 const scrollContainer = document.getElementById("scrollContainer"); 54 scrollContainer.scrollTop = scrollContainer.scrollHeight; 55 }); 56 </script>