JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contener">
  <span class="editableLabel">
    <span class="contentTrimmed">aaaa bbbb cccc dddd eeee ffff gggg hhhh iiii jjjj kkkk llll mmmm nnnn</span>
  </span>
</div>

CSS

.contener {
  width: 300px;
}

.editableLabel {
    display: flex;
}

.contentTrimmed {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}