Почему не срабатывает text-overflow: ellipsis?

Question

[Валерий Суворов]

Почему не работает в коде text-overflow: ellipsis?
А именно после переполнения в первой строке должно быть поставлено троеточие.
https://codepen.io/valerun/pen/oNGVPmR

Answer 1

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

https://codepen.io/aliencash/pen/BawbqNp
Во-первых, это свойство действует только на inline элементы.
Во-вторых, ширина элемента должна быть явно ограничена, иначе браузер не поймет где ему обрезать строку.

Comments

[Dima Polos]

А еще нужно запретить перенос текста на новую строку. Иначе зачем заменять если можно перенести? И также родителю overflow: hidden.