Как обрезать текст многоточием

Короткий ответ

Нужны три свойства вместе: запрет переноса, скрытие лишнего и многоточие:

<p style="width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">A very long product name that does not fit on one line</p>

white-space: nowrap вытягивает текст в одну строку, overflow: hidden прячет то, что не поместилось, а text-overflow: ellipsis ставит на месте обреза многоточие.

Несколько строк

line-clamp оставляет заданное число строк. Пока свойство работает с префиксом и в паре с display: -webkit-box:

<p style="width: 220px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">A long product description that takes more than two lines, so the rest of the text hides behind an ellipsis.</p>

Несмотря на префикс, эта запись работает во всех современных браузерах.

Обрезка во flex-строке

Внутри flexbox текст по умолчанию не сжимается меньше своей ширины. Добавьте элементу с текстом min-width: 0:

<div style="display: flex; gap: 8px; width: 240px;">
  <span style="min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">anna.smith.long.email@example.com</span>
  <button>Edit</button>
</div>

Частая ошибка

Многоточие не появляется, если у элемента нет ограниченной ширины или он строчный, как span вне flexbox. text-overflow работает только у блока с шириной и overflow: hidden — по отдельности эти свойства ничего не обрезают.