Tekst afkappen

<div draggable="true" class="resizable">
  <h1>Lange tekst afkappen met CSS als extra stijl</h1>
  <p class="afkappen">
  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>Sleep het hoekje rechtsonder om de breedte te veranderen</em></p>

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

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

[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;
}