如何使用javascript在动画中换行？

我正在尝试为我正在使用的字符之间的给定行间距实现打字机动画

function splitLetters(word) {
  var content = word.innerHTML;
  word.innerHTML ='';
  var letters = [];
  for (var i = 0; i < content.length; i++) {
    var letter = document.createElement('span');
    letter.className = 'letter';
    var char = content.charAt(i);
    letter.innerHTML = char===" "?"&nbsp;":char;
    word.appendChild(letter);
    letters.push(letter);
  }

  wordArray.push(letters);
}

great和web之间的空间以及开发人员面前的换行符

任何帮助都将不胜感激。 我也不想把“美妙”这个词变成两个词

var words=document.getElementsByClassName（'word'）；
var wordArray=[]；
var-currentWord=0；
for（var i=0；i
：根目录{
--主色：#fff；
}
身体{
背景色：#252627；
边际：0px；
宽度：100%；
身高：100%；
溢出：隐藏；
}
.第页{
宽度：100%；
身高：100%；
位置：绝对位置；
}
.BG标志{
位置：绝对位置；
最高：20%；
右：15vh；
高度：65vh；
宽度：65vh；
z指数：0；
}
路径{
填充：#252627；
行程：#00ffdc；
动画：my_动画2线性向前，填充。2线性2向前；
笔划数组：400；/*需要*/
笔划偏移量：400；/*…匹配*/
}
@为my_动画设置关键帧{
到{stroke dashoffset:0}
}
@关键帧填充{
至{fill:#ff0046}
}
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:600）；
身体{
字体系列：“开放式Sans”，无衬线；
字号：600；
字体大小：40px；
}
.文本{
位置：绝对位置；
左：10%；
最高：50%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
宽度：40%；
最高高度：90%；
}
p{
显示：内联块；
垂直对齐：顶部；
保证金：0；
颜色：白色；
字体大小：64px；
}
.字{
位置：绝对位置；
宽度：100%；
不透明度：0；
空白：nowrap；
}
.信{
显示：内联块；
位置：相对位置；
浮动：左；
变换：translateZ（25px）；
变换原点：50%50%25px；
}
.写信出去{
变换：rotateX（90度）；
变换：变换0.32s三次贝塞尔（0.55,0.055,0.675,0.19）；
}
.信后面{
变换：rotateX（-90度）；
}
.信{
变换：旋转（0度）；
变换：变换0.38s三次贝塞尔（0.175,0.885,0.32,1.275）；
}
紫藤{
颜色：#8e44ad；
}
伯利兹先生{
颜色：#2980b9；
}
.石榴{
颜色：#c0392b；
}
格林先生{
颜色：#16a085；
}
.午夜{
颜色：#2c3e50；
}
p{
颜色：var（--mainColor）；
文字装饰：无；
}
p:悬停{
颜色：透明；
-webkit文本笔划：2px var（--mainColor）；
}
@不支持（-webkit文本笔划：2px红色）{
p:悬停{
文本阴影：
3px 3px 0变量（--mainColor），
-1px-1px 0变量（--mainColor），
1px-1px 0变量（--mainColor），
-1px 1px 0变量（--mainColor），
1px 1px 0变量（--mainColor）；
}

维万克·夏尔马

出色的开发者
伟大的网络开发者


一种简单的方法是插入一个

标记，而不是
span
。您可以对所有空格执行此操作，如下所示：


var words=document.getElementsByClassName（'word'）；
var wordArray=[]；
var-currentWord=0；
for（var i=0；i

：根目录{
--主色：#fff；
}
身体{
背景色：#252627；
边际：0px；
宽度：100%；
身高：100%；
溢出：隐藏；
}
.第页{
宽度：100%；
身高：100%；
位置：绝对位置；
}
.BG标志{
位置：绝对位置；
最高：20%；
右：15vh；
高度：65vh；
宽度：65vh；
z指数：0；
}
路径{
填充：#252627；
行程：#00ffdc；
动画：my_动画2线性向前，填充。2线性2向前；
笔划数组：400；/*需要*/
行程偏移量：400；/*。。。
great web
developer