Как использовать многоточие в ячейке таблицы?

<div className = "container">
  <div className = "left-area">
    <div className = "container2">
      <table>
        <tbody>
          <tr>
            <td>
              48148581581581858158158iffjafjadjfjafdjafdjfjadfjdjafdjafdjajdfjadfjdafjdajfajfdjaf
            </td>
            <td>1/1/0001</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Я хочу обрезать этот очень длинный текст.

.container {
  margin-top: 20px;
  width: 90%;
  display: flex;
  .left-area {
    flex: 1 1 20%;
    .container2 {
      flex: 1 1 20%;
      table {
        width: 100%;
      }
    }
  }
}

Я пробовал использовать этот css на td cell

  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;