如何使大于其包装的文本不可见

Question

我想要这个动画，在延迟后文本会展开。我已经完成了这个，但是我想要显示的文本没有出现，所以我尝试使用自动换行 css 属性，但是没有选项可以让文本不可见比容器大。我该怎么做才能发生这种情况？我试过搜索其他问同样问题的帖子，但我没有找到。

这里有一个fiddle,jsfiddle.net/wm3n7g58/20.

Answer 1

试试这个 css、white-space: nowrap; 和包装 overflow:hidden;

h1{
  color:red;
  background: gold;
  text-align: center;
  font-family: Calibri;
  white-space: nowrap;
  width: 100vw; /*STOPS THE TEXT FROM MOVING*/
  
}

.wrapper{
  animation-name: animation;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-timing-function: ease-in-out;
  white-space: nowrap;
  overflow:hidden;
}

@keyframes animation{
  
  0%{
    width: 0px
  }
  100%{
    width:100%
  }
}

<div class = "wrapper">
  <h1>
  This is a Wrapper 
  </h1>
</div>

如何使大于其包装的文本不可见

How can I make text that is bigger than its wrapper be invisible

html

css

css-animations