Как реализовать плавное выпадение текста?

Question

[Old_Chicken]

Я сделал при клике на кнопку, чтобы высота блок плавно увеличивалась как в красном блок, только мне надо чуток сделать по другому, у меня есть желтый блок, у меня должно отображаться только первая строчка все остальное предложение должно быть ... в трех точках и когда я нажимаю на кнопку я бы хотел, чтобы оно также плавно опускалось как и красный блок, а не сразу весь текст отображался?

Answer 1

[MrColdCoffee]

удалить overflow: visible;

а для многоточия у класса qwe нужно делать обрезание текста

.second__wrapper .qwe{ ... }
.second__wrapper.open .qwe{ ... }

Comments

[Old_Chicken]

Не сильно понял , когда я добавил white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; для класса .qwe у меня вообще пропал текст из видимости , а мне надо , чтобы условно отображалась одна строчка , и она обрезана троеточием , а когда я добавляю open троеточием убирается и выпадает весь текст ?

[MrColdCoffee]

Old_Chicken,

.second__wrapper {
   width: 200px;
   background: yellow;
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.5s ease;
}
.qwe {
   min-height: 25px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.second__wrapper.open {
   grid-template-rows: 1fr;   
}
.second__wrapper.open .qwe{
  white-space: wrap;
}