Обрезка длинного текста с помощью CSS

Когда длинный текст не помещается в строку, а переносить его на следующую испортило бы дизайн и было бы крайне не желательно, обычно в верстке большинство веб-мастеров используют css свойства white-space: nowrap; и overflow: hidden, позволяющие запретить перенос текста, и разрешить его перекрытие контейнером, в котором он находится. Но есть способ элегантнее — дополнить многоточием сокращаемую строку.
Пример ниже:

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