JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr><td>
    Column 1.
  </td><td>
    Column 2.
    <div class="prevent-table-expand-wrap">
      <!--
        This nbsp is here so the wrapper div gets a height of one line (line-height).
        Of course this is specific to this implementation. I don't think it's possible to expand the wrapper's
        height according to its content. So you need to give it a fixed height.
      -->
      &nbsp;
      <div class="prevent-table-expand-inner" title="This contains way too much text, so prevent scaling table">
        Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text.
      </div>
    </div>
  </td><td>
    Column 3.
  </td></tr>
</table>

CSS

table {
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid gray;
  padding: 20px;
}

.prevent-table-expand-wrap {
  position: relative;
}
.prevent-table-expand-inner {
  /* Add ellipsis. */
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
  /* Make div the width of its parent. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}