JSFiddle - React, Tailwind, and code Playground

HTML

<table><tr>
<td>какой-то длинный текст в ячейке</td>
<td>just</td>
<td>for</td>
<td>fan</td>
</tr></table>

<div>какой-то длинный текст в div</div>

CSS

table{
  width: 200px;
  background: red;
}

td, div{
  max-width: 165px; padding: 0 16px;
  height: 24px; line-height: 24px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  /*
  white-space: nowrap; не даёт должного результата
  word-wrap: break-word; тоже
  */ 
  background: white;
}  

div{ margin-top: 10px; }

JavaScript

/*

Задача: чтобы слева и справа были отпступы, за которые не выйдет текст. 

Если применить white-space, то текст будет налезать на правый padding.
*/