When the text length increases in the first image, it shifts upwards similar to what you see in this image. How can I achieve this effect?
The use of "word-wrap" causes the line to break and move to the next line, which is not what I want.
In the code snippet below, the ALBUMTextContainer is nested inside the album class. The goal is to avoid affecting the position of the "count", but instead shift the "title" upwards if it overflows.
.album {
margin-top: 1rem;
padding: 0 12px;
position: relative;
}
.ALBUMTextContainer {
position: absolute;
bottom: 0;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);
width: 352px;
height: 80px;
display: flex;
justify-content: center;
&_details {
word-wrap: break-word;
line-height: 1.34;
text-align: center;
margin-bottom: 20px;
&_name {
width: 330px;
color: #fff;
font-size: 22px;
}
&_count {
color: #ccc;
font-size: 15px;
font-weight: normal;
padding-top: 2px;
}
}
}
<div className="ALBUMTextContainer">
<div className="ALBUMTextContainer_details">
<div className="ALBUMTextContainer_details_name">{title} </div>
<div className="ALBUMTextContainer_details_count">{count}</div>
</div></div>