JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
  <li>
    <p>Moo</p>
  </li>
  <li>
    <p>Moo</p>
  </li>
  <li>
    <p>Moooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
    </li>
  <li>
    <p>Moo</p>
  </li>
</ol>

CSS

p {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 16px;
}
p:after
{
  content: 'X';
  background: yellow;
  position: absolute;
  right: 0;
  top: 0;
}