JSFiddle - React, Tailwind, and code Playground

HTML

<div class="display-flex">
  <div class="display-flex">
    <p class="truncated percentage-width">
      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>
  </div>
</div>

CSS

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

.percentage-width {
  width: 100%;
}

.display-flex {
  display: flex;
  overflow: hidden;
}