JSFiddle - React, Tailwind, and code Playground

by Alon Rotem

HTML

<div>
   <span>ONE<br/>
   TWO<br/>
   THREE<br/>
   FOUR</span>
</div>

CSS

div {
  display: flex;
  overflow: hidden;
  width: 175px;
  border: 1px solid red;
  flex-direction: column;
  height: 45px;
  text-overflow: ellipse;
}

div span:not(:last-child) {
  margin-right: 1ch;
  flex-shrink: 0;
}

div span {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipse;
}