Hide overflow text(but not delete) on auto scroll-CodePudding

I am trying to hide excess text that is in a child div without (1) completely removing it or (2) forcing it into vertical text. This is because I want the excess text to be revealed like how Spotify & Apple Music does it.

Essentially I want the red div to "mask" my child h3. I tried converting the div to relative positioning but that forced the text to fit vertically, which I don't want.

Here is my code:

.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 >
   <h3>This is a really long title that doesn't fit</h3>
</div>

CodePudding user response：

Try this, I added flex-box to center the text.

.example1 {
    width: 200px;
    height: 50px;

    border: 10px solid black;
    overflow: hidden;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

h3 {
    transform: translateX(100%);
    animation: horizontal-scroll 20s linear infinite;
    width: max-content;
    margin: 0;
}

@keyframes horizontal-scroll {
    to {
        transform: translateX(-100%);
    }
}

<div >
   <h3>This is a really long title that doesn't fit</h3>
</div>