JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Truncated</h2>
<div class="truncate">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>

<h2>Normal</h2>
<div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>

<p>
    <small>
        <a href="http://www.whatibroke.com/?p=1025">WhatIBroke</a>
    </small>
</p>

CSS

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}