title: how do you make text in html smaller every time it doesn't fit in the container
body: <p>So I have a <a href="https://codepen.io/happyprogrammer-code/pen/YzQVQoR" rel="nofollow noreferrer">simple html and css setup</a> that looks like this</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;box&quot;&gt;
    
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, ab! Non esse natus aliquid id est placeat dolorem velit explicabo.&lt;/p&gt;
    
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.box{
    height: 100px;
    width: 300px;
    background-color: blue;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%)
  }
  </code></pre>
  <p>and it looked like this</p>
  <p><a href="https://i.stack.imgur.com/riYy1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/riYy1.png" alt="enter image description here" /></a></p>
  <p>but then if I add more characters to it, it will spread outside of the containers which is expected</p>
  <p><a href="https://i.stack.imgur.com/jypb8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jypb8.png" alt="enter image description here" /></a></p>
  <p>but how do you make it so that if the text were to spread out it will shrink instead to keep it inside of the container?</p>