<div class="box">
  <p>Hey, don't cut me off like that. I want to speak my mind and don't appreciate being put into a box.</p>
</div>
body {
  align-items: center;
  background: 
    radial-gradient(
      farthest-side at bottom left,
      rgba(255, 0, 255, 0.5), 
      #246756
    ),
    radial-gradient(
      farthest-corner at bottom right,
      rgba(255, 50, 50, 0.5), 
      #246756 400px
    );
  display: flex;
  height: 100vh;
  justify-content: center;
  line-height: 1.5;
}

.box {
  background-color: #fff;
  box-shadow: 2px 2px 10px #246756;
  padding: 2em;
  width: 200px;
}
var module = document.querySelector(".box p");

$clamp(module, {clamp: 3});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/Clamp.js/0.5.1/clamp.js