JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
  <span class="truncate" style="width: 50px">
    aghyaghy
  </span>
</div>

CSS

.item {
    line-height: 1;
}

.truncate {
  display: inline-block;
  overflow-x: hidden;
}

*::-webkit-scrollbar {
  width: 10px;
  background-color: green;
}

*::-webkit-scrollbar-thumb {
  background: red;
}