Три крапки в кінці тексту, якщо текст не вміщується в блок на CSS

Моя нелюбов до CSS закінчується там, де ним можна замінити JavaScript код, як і сталося в даному випадку.

Виявляється, поставити три крапки в кінці тексту, якщо блок тексту не вміщується в блок, можна на чистому CSS, застосувавши всього кілька правил! Швидше нотатка самопосоромлення для мене. Всі роки до цього я робив це на JS, навіть якщо текст треба було виводити в один рядок.

Дивіться приклад на CodePen: Три крапки в кінці, якщо текст не вміщується в один рядок

CSS-код для усічення тексту з трьома крапками

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

Як працюють властивості:

• white-space: nowrap; - забороняє перенос тексту на новий рядок
• overflow: hidden; - приховує текст, що виходить за межі блоку
• text-overflow: ellipsis; - додає три крапки замість overflow-тексту