Line clamping

<div draggable="true" class="resizable">
  <h1>Truncating long text with CSS as an extra touch</h1>
  <p class="truncate">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend, leo ut pellentesque ornare, libero urna venenatis ligula, et tincidunt lectus lectus id metus. Etiam eu lacinia orci, quis pulvinar est. Pellentesque sed dictum mauris. Etiam blandit ipsum vitae mauris sollicitudin, vitae egestas erat tristique. Suspendisse vestibulum suscipit sagittis. Pellentesque et tempor mi. Duis lacus purus, feugiat in imperdiet sed, accumsan sed elit. Donec non eros id dui interdum efficitur. Sed ut consectetur lacus. Etiam suscipit turpis ac tellus placerat placerat. Nam fermentum tortor vitae mi sodales, sit amet semper sem aliquet. In hac habitasse platea dictumst.
  </p>
  </div>
  <p><em>Drag the bottom-right corner to change the width</em></p>

h1, p {
  display: -webkit-box;
  -webkit-line-clamp: 1; /* line count */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

p {
  -webkit-line-clamp: 3; /* line count */
}

[draggable=true] {
  cursor: move;
}
  
.resizable {
  overflow: scroll;
  resize: both;
  max-width: 100%;
  max-height: fit-content;
  border: 1px solid black;
  min-width: 50%;
  min-height: fit-content;
  background-color: darkcyan;
}