JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="child1">
  <div class="child2">
    Lots of words Lots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of wordsLots of
  </div>
  </div>
</div>

CSS

.main
{
  display: flex;
  border: 1px solid black;
  height: 200px;
  padding: 10px;
  overflow: hidden;
}

.child1
{
  display: flex;
  border: 1px solid red;
  height: 100px;
  overflow: hidden;
}

.child2
{
  flex: 1 1 auto;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}