JSFiddle - React, Tailwind, and code Playground

HTML

<span>##########YH35</span>
<br/>
<span>##########8LHm</span>

<br/>
<span>&#35;&#35;&#35;&#35;&#35;&#35;&#35;&#35;&#35;&#35;aH35</span>
<br/>
<span>&#35;&#35;&#35;&#35;&#35;&#35;&#35;&#35;&#35;&#35;1LHm</span>

CSS

span {  
  white-space: nowrap;                   
  overflow: hidden;              /* "overflow" value must be different from "visible" */   
  text-overflow:    ellipsis;  
  display: inline-block;
  max-width:170px;
  direction:rtl;
  text-align:left;
}