JSFiddle - React, Tailwind, and code Playground

by silverwind

HTML

<div class="target">
  Text here is very very long that it will overflow the width of the containing element. Adding another sentence to make sure it will overflow.
</div>

CSS

.target {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: red;
  margin: 2rem;
  display: flex; /* remove this to get ellipsis to show */
}