JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<p>first > second > third<br />
second > third > fourth > fifth > sixth<br />
fifth > sixth > seventh > eighth > ninth</p>

CSS

p {  
  white-space: nowrap;                   
  overflow: hidden;              /* "overflow" value must be different from "visible" */   
  text-overflow:    ellipsis;  
    width:170px;
    border:1px solid #999;
    direction:rtl;
    text-align:left;
}