Is there a way to make my text expand and display all of its content when hovered over, especially for those sections that are longer than the div size? I currently have some code implemented, but it seems to reveal the text horizontally. I am looking for a solution that will show the text vertically while also incorporating a smooth slide-down effect for text that does not exceed the width of the div.
.show {
padding: 5px 5px 5px 5px;
border-radius: 10px;
height: 20px;
margin: 5px 1% 5px 1%;
position: relative;
transition: height 0.5s;
-webkit-transition: height 0.5s;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
line-height: normal;
outline: 0 none;
text-decoration: none;
text-transform: uppercase;
}
.show:hover {
height: 100px;
overflow: visible;
}