Mesuti
@Mesuti

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

Привет!
Как можно сделать плавное разворачивание блока и обрезать не влезающий текст многоточием?
Почему transition и text-overflow: ellipsis не работает?
Песочница jsFiddle
  • Вопрос задан
  • 1067 просмотров
Решения вопроса 1
Madeas
@Madeas
UI / UX Designer, Frontend Developer
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
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
snap44
@snap44
Фыр!
Потому что значение auto не анимируется.
Это все если и реально сделать на css, это будут ужасные костыли. Для этого есть js.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы