Как поправить верстку?

Question

[Mark321]

Добрый день, подскажите пожалуйста как это можно реализовать
Есть контейнер (указана максимальная его ширина)
Есть ячейка с текстом, надо, что бы в конце текста ставились троеточие
https://codepen.io/scrappyjs666/pen/ZERNymp
вот так, но проблема в том, что я не знаю размер ячейки дескрипшен, только контейнера
поэтому я не могу ей задать размер
https://codepen.io/scrappyjs666/pen/WNyBOLN
Если убираю размер для ячейки с текстом,то елипсис перестает работать
Как указать размер ТОЛЬКО для контейнера и при этом что бы текст был по ширине контейнера и к концу контейнера обрезался елипсисом

Comments

[Вадим]

jsfiddle за VPN. Для большего охвата лучше выкладывать на codepen

[Mark321]

Вадим, спасибо, поправил

Answer 1

[Dino Winchester]

.description {
  width: 100%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Дополнительные варианты

<td class='description'>
  <div class="textbox">
    <span> TEXT </span>
  </div>
</td>

.textbox {
  width: 100%;
  display: inline-grid;
}

.textbox span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Или:

<td class='description'>
  <div class="textbox"> TEXT </div>
</td>

.textbox {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}