Это не те свойства, которые могут быть изменены.
white-space: nowrap;
text-overflow: ellipsis;
Чтобы перейти от одного свойства к другому, CSS требует промежуточных значений.
Не существует промежуточных значений от nowrap до normal, так как нет промежуточных значений от heright: 0 до auto или от display: нет блокировать.
Единственный способ добиться этого с помощью CSS - это использовать max-height для вашего элемента и передавать его при наведении курсора. Тем не менее, сами пробелы / многоточия должны были бы пойти => заменить их псевдоэлементом с тем же backgroundColor, что и у родителя:
.x {
position: relative;
overflow: hidden;
max-height: 20px; /* set this to the height your first row would be */
background-color: red; /* you can change this, ofc */
transition: max-height .5s; /* the duration of the transition */
}
.x:after {
content: '...';
position: absolute;
top: 0; right: 0;
height: 1.5em; /* positioning it in line with the text - hacky */
padding: 0 .2em;
background-color: red; /* keep the same as parent - it cannot be transparent unfortunately */
opacity: 1;
transition: opacity 0s .5s; /* will delay the appearance of the '...' until the expanding transition has finished */
}
.x:hover {
max-height: 1000px; /* can be lower to create smoother response time */
}
.x:hover::after {
opacity: 0;
transition: opacity 0s 0s; /* will apply the appearance of the '...' when hovered */
}
Хаки, немыслимые, но работающие только с CSS.