直接上效果图：
代码：
<style>
/* 通用属性 */
.common{
/* 盒子高度与行高一致，
2em是为了不让底部出现下一行文字的头部一部分 */
height: 2em;
line-height: 2em;
/* 强制换行，强制拆解英文单词 */
white-space: wrap;
word-break: break-all;
/* 字体设置 */
font-size: 20px;
/* 超出部分隐藏 */
overflow: hidden;
}
/* 动画 */
.typingAni{
animation: typing 2s forwards linear;
}
@keyframes typing {
from {
width: 1em;
}
to {
width: 5em;/* 为字符串长度 */
}
}
</style>
<body>
<div class="common typingAni">
WDNMD
</div>
</body>
原理就是文字在容器宽不够的时候会进行换行，当宽度逐渐增加文字会退到首行，通过overflow:hidden隐藏下面的内容，展现出像一个一个文字打字一样的效果
缺陷：
- 首个字符必定会显示，如果动画设置为宽度0首字符会是擦除出现的动画
- 因为文本内容的问题，标点之类的只要最后有一点距离就会不换行，导致有标点的位置下一个字符会跟标点一起出现
