<section class="flex">
  <h2>With Flexbox </h2>
  <article class="wrapper">
    <p class="text--truncated">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae euismod nulla, sed consequat ante. Proin convallis, ex a maximus pellentesque, ante lectus convallis ante, egestas lacinia mauris augue sit amet nisi. Aliquam pellentesque, arcu eu efficitur
      elementum, nunc lacus accumsan justo, in egestas erat orci ut ante proin quis maximus neque. Aliquam sed mollis velit. Mauris egestas semper viverra. Ut vel dapibus mauris. Pellentesque bibendum nunc consectetur velit malesuada, quis consectetur
      tellus volutpat.
    </p>
  </article>
</section>

<section class="table">
  <h2>With Table </h2>
  <article class="wrapper">
    <p class="text--truncated">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae euismod nulla, sed consequat ante. Proin convallis, ex a maximus pellentesque, ante lectus convallis ante, egestas lacinia mauris augue sit amet nisi. Aliquam pellentesque, arcu eu efficitur
      elementum, nunc lacus accumsan justo, in egestas erat orci ut ante. Proin quis maximus neque. Aliquam sed mollis velit. Mauris egestas semper viverra. Ut vel dapibus mauris. Pellentesque bibendum nunc consectetur velit malesuada, quis consectetur
      tellus volutpat.
    </p>
  </article>
</section>

<section class="multiline">
  <h2>Bonus: Multiline</h2>
  <div class="wrapper">
    <p class="text--truncated">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae euismod nulla, sed consequat ante. Proin convallis, ex a maximus pellentesque, ante lectus convallis ante, egestas lacinia mauris augue sit amet nisi. Aliquam pellentesque, arcu eu efficitur
      elementum, nunc lacus accumsan justo, in egestas erat orci ut ante  proin quis maximus neque. Aliquam sed mollis velit. Mauris egestas semper viverra. Ut vel dapibus mauris. Pellentesque bibendum nunc consectetur velit malesuada, quis consectetur
      tellus volutpat.
    </p>
  </div>
</section>

/* WITH FLEXBOX */
.flex .wrapper {
  display:flex;
}
  
.flex .text--truncated {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* WITH TABLE */
.table .wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
}
  
.table .text--truncated {
  display: table-cell;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* MULTI-LINE */
.multiline .text--truncated {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}