css 文字逐渐出来支持换行

要实现CSS文字逐渐逐行出现的效果，并支持换行，可以借助CSS的animation和@keyframes属性，以下是一个简单的例子：

<div class="typewriter-wrap">
  <h1 class="typewriter">
    <span>Hello</span>
    <br>
    <span>World!</span>
  </h1>
</div>

.typewriter-wrap {
  position: relative;
  display: inline-block;
  white-space: pre-wrap;
}

.typewriter {
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  font-size: 30px;
  letter-spacing: .15em;
  animation: typing 3.5s steps(30, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

.typewriter > span {
  display: inline-block;
  opacity: 0;
  animation: fadeInWords 3.5s ease-in-out forwards;
}

@keyframes fadeInWords {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

在上面的代码中，我们首先定义了一个名为"typewriter-wrap"的div容器，设置了white-space:pre-wrap属性，支持换行。然后，我们在div中嵌套了一个h1标题，将需要逐渐出现的文字分成了两行，并使用<br>标签进行换行。接着，我们设置了与前面相同的样式和动画效果：逐字逐行出现和光标闪烁。

最后，我们通过.typewriter > span选择器，设置单个文字的逐渐出现效果。因为我们使用了<br>标签进行换行，所以每行文字都被包裹在一个<span>元素中，通过display:inline-block属性将其转换为行内块级元素，实现逐渐出现的效果。

通过这种方式，文字就会在页面加载后逐渐逐行出现，并伴随着光标闪烁的效果。同时，它也支持换行，您可以根据需要进行修改。