tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

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>