JSFiddle - React, Tailwind, and code Playground

by extempl

HTML

<div class="main">
   <div class="first-part"> Her comes very very very very very very very very very very very very very very very very very very very long </div>
   <div> &nbsp;but flexible line</div>
</div>

CSS

.main {
  width:100%;
  border:1px solid green;
  white-space:nowrap;
  display:inline-flex;
}

.first-part {
  text-overflow: ellipsis;
  overflow:hidden;
}