Text not clipping correctly in CSS-CodePudding

I have a problem with text clipping, practically when I set the div to a lower width than the text, it disappears. I want it to clip words as it reduces its size... I tried with overflow: hidden and also text-overflow: clip but it's not working as I want. Here's the code, thank you in advance.

.finalCutStyleButton{

    width: 90mm;
    height: 20mm;

    background-color: #b3be9e;

    animation: test 2s ease-in;
}

@keyframes test{

    from{
        width: 90mm;
    }
    to{
        width: 30mm;
    }
}
.title{

    font-size: 10mm;
    font-family: 'SFProBold', sans-serif;
    font-weight: bold;
    display: inline-block;
    width: auto;
}

<div class = "finalCutStyleButton adjustPadding">

   <h1 class = "title">VIDEO EDITING</h1>
</div>

CodePudding user response：

try adding same keyframe logic to the text:

.finalCutStyleButton {
  width: 90mm;
  height: 20mm;

  background-color: #b3be9e;
  display: flex;
  align-items: center;
  animation: test 2s ease-in;
}

@keyframes test {
  from {
    width: 90mm;
  }
  to {
    width: 30mm;
  }
}
.title {
  font-size: 10mm;
  margin: 0 0;
  font-family: "SFProBold", sans-serif;
  font-weight: bold;
  display: inline-block;
 min-width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

<div >
      <h1 >VIDEO EDITING</h1>
    </div>