Как сделать плавное разворачивание блока а скрытый текст обрезать многоточием?

Question

[Mesuti]

Привет!
Как можно сделать плавное разворачивание блока и обрезать не влезающий текст многоточием?
Почему transition и text-overflow: ellipsis не работает?
Песочница jsFiddle

Answer 1

[Andrej Sharapov]

div {
  border: 1px solid gray;
  display: block;
  width: 155px;
  height: 30px;
  padding: 10px;
  text-align: justify;

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease
}

div p {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis
}

div:hover {
  height: 90px
}

div:hover p {
  white-space: normal;
  overflow: none
}

Answer 2

[snap44]

Потому что значение auto не анимируется.
Это все если и реально сделать на css, это будут ужасные костыли. Для этого есть js.

Comments

[Mesuti]

Подскажете, как может выглядеть решение на JS?
Думаю, лучше минимализм, чем загрузка библиотек jQuery.
Я нашел примеры только на jQuery. Поэтому решил на CSS сделать