JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  
  <table border="1">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 5</th>
    <th>Column 6</th>
    <th>Column 7</th>
    <th>Column 8</th>
    <th>Column 9</th>
    <th>Column 10</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Orange</td>
    <td>Banana</td>
    <td>Strawberry</td>
    <td>Grapes</td>
    <td><div class="truncateme">This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap. This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap. This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap. This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap.</div></td>
    <td>Watermelon</td>
    <td>Peach</td>
    <td>Mango</td>
    <td>Kiwi</td>
  </tr>
  <tr>
    <td>Carrot</td>
    <td>Broccoli</td>
    <td>Tomato</td>
    <td>Cucumber</td>
    <td>Spinach</td>
    <td>Potato</td>
    <td>Eggplant</td>
    <td>Cabbage</td>
    <td>Cauliflower</td>
    <td>Pepper</td>
  </tr>
  <tr>
    <td>Pear</td>
    <td>Cherry</td>
    <td>Blueberry</td>
    <td>Blackberry</td>
    <td>Raspberry</td>
    <td>Melon</td>
    <td>Lemon</td>
    <td>Lime</td>
    <td>Coconut</td>
    <td>Papaya</td>
  </tr>
  <tr>
    <td>Lettuce</td>
    <td>Onion</td>
    <td>Garlic</td>
    <td>Ginger</td>
    <td>Zucchini</td>
    <td>Kale</td>
    <td>Radish</td>
    <td>Beetroot</td>
    <td>Brussels Sprouts</td>
    <td>Asparagus</td>
  </tr>
  <tr>
    <td>Apricot</td>
    <td>Plum</td>
    <td>Nectarine</td>
    <td>Pomegranate</td>
    <td>Fig</td>
    <td>Avocado</td>
    <td>Guava</td>
    <td>Passion Fruit</td>
    <td>Starfruit</td>
    <td>Lychee</td>
  </tr>
</table>
  
</section>

CSS

section {
  background: green;
  padding: 50px;
}

table {
  background: white;
  width: 100%;
  border-collapse: collapse;
}

.truncateme {
  /*
  Remove the "nowrap" line to see the text wrap and the
  table return to normal width with no overflow.
  This is the width I want to achieve, but instead of the
  text wrapping on to multiple lines, I want it to break
  with an ellipsis "..." at that width.
  */
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}