Не получается обрезать текст с помощью css. Как это реализовать?

Question

[iamdeveloper]

в верстке есть название файла. Если название файла слишком длинное, то оно должно обрезаться и в конце должны добавляться три точки (на так чтобы расширение файла оставалось видимым)
Сделал это с помощью свойств

.doc__text {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Но это не помогло. Обычно раньше в подобных ситуациях помогало.
Подскажите как тогда это реализовать?
Код здесь https://codepen.io/yaparoff/pen/BayPrdV

Answer 1

[Андрей Федоров]

Так обрезаются только блочные элементы, span по умолчанию строчный. Добавьте ему display: inline-block;

Answer 2

[Антон]

.doc__text {display: block}