JSFiddle - React, Tailwind, and code Playground

by Kiran G

HTML

<ul>
  <li class="item">
    <span>
        <div>
          Item Code that is way too long and shoud use ellipsis
        </div>
    </span>
    <span>Descriptive Text</span>
  </li>
  <li class="item">
  
    <span>
        <div>
          Item Code that is way too long and shoud use ellipsis
        </div>
    </span>
    
    <span> <div>
      Descrissssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
    </div></span>
  </li>

</ul>

CSS

li span {
  display: inline-flex;
}

.item span {
  width: 100px;
  margin-left: 5px;
  white-space: nowrap;
}

.item span div {
  overflow: hidden;
  text-overflow: ellipsis;
}