JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text-overflow">
<div class="more-overflow">This is some lonnnnnng text;</div>
</div>

CSS

.text-overflow {
  border: 1px solid black;
  width: 10px;
  //margin-left: -100%;
  //margin-right: -100%;
  text-align: center;
}

.more-overflow {
  display: inline-block;
  margin-left: -30px;
  margin-right: -30px;
}