I am looking to conceal extra text within a child div without fully deleting it or forcing it into a vertical orientation. I want the excess text to be revealed gradually, similar to how Spotify and Apple Music handle it.
My goal is for the red div to act as a "mask" for my child h3. I attempted changing the div to relative positioning, but that caused the text to display vertically, which is not what I desire.
Below is the code snippet:
.example1 {
margin-left: 100px;
height: 50px;
width: 100px;
border: 10px solid red;
}
.example1 h3 {
position: absolute;
width: auto;
margin: 0;
line-height: 50px;
text-align: center;
border: 10px solid black;
/* Starting position */
transform:translateX(50%);
/* Apply animation to this element */
animation: example1 20s linear infinite;
}
/* Move it (define the animation) */
@keyframes example1 {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}<div class="example1">
<h3>This is a really long title that doesn't fit</h3>
</div>