CSS 中的文本未正确剪裁

Question

我的文本剪辑有问题，实际上当我将 div 设置为比文本更小的宽度时，它就会消失。我希望它在缩小尺寸时剪辑单词...我尝试使用overflow: hidden 和text-overflow: clip 但它没有按我想要的那样工作。这是代码，在此先感谢您。

CSS：

.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;
}

HTML:

<div class = "finalCutStyleButton adjustPadding">

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

Answer 1

尝试向文本添加相同的关键帧逻辑：

.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 class="finalCutStyleButton adjustPadding">
      <h1 class="title">VIDEO EDITING</h1>
    </div>