line-clamp-with-floats-010-ref.html (706B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Reference</title> 4 <style> 5 #scrollContainer { 6 overflow: scroll; 7 font: 16px / 32px serif; 8 height: 4lh; 9 border: 1px solid black; 10 } 11 .clamp { 12 display: flow-root; 13 padding: 0 4px; 14 white-space: pre; 15 background-color: yellow; 16 } 17 .float { 18 float: left; 19 width: 50px; 20 height: 50px; 21 margin: 4px; 22 background-color: skyblue; 23 } 24 </style> 25 26 <div id="scrollContainer"> 27 <div class="clamp">Line 1 28 Line 2 29 Line 3 30 Line 4…<div class="float"></div></div> 31 32 <script> 33 window.addEventListener("load", () => { 34 const scrollContainer = document.getElementById("scrollContainer"); 35 scrollContainer.scrollTop = scrollContainer.scrollHeight; 36 }); 37 </script>