JSFiddle - React, Tailwind, and code Playground

HTML

<p class="truncated flex">
  This long line of text should be truncated. This long line of text should be truncated. This long line of text should be truncated. This long line of text should be truncated.
</p>

CSS

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

.flex {
  flex: 1 1 auto;
  min-width: 0;
}