JSFiddle - React, Tailwind, and code Playground

by ecoblack

HTML

<div><p class="ellipsis2">eert3452654546rt3452654546</p>
</div>
<div><p class="ellipsis">eert3452654546rt3452654546</p>
</div>

CSS

.ellipsis
    {
      overflow:hidden;
      width: 100px;
      direction:ltl; 
      TEXT-ALIGN:right;
     
      white-space: nowrap;
     }

.ellipsis:after{position:absolute;left:0px;}


.ellipsis2 {
  overflow:hidden;
      width: 100px;
      direction:rtl; 
      TEXT-ALIGN:right;
     
      white-space: nowrap;
 text-align:left;
}