Javascript 如何在我的“后”添加换行符&&引用；字符，而不是我的代码片段中显示的问题（添加额外的空格，而不是换行符）？

我试图在三个

span

元素中的“&”字符后添加换行符

具体而言，这里：

<span class="word pomegranate text_animation">creativity &#65286;
 categories</span>
<span class="word wisteria text_animation">form &#65286;
 function</span>
<span class="word belize text_animation">style &#65286;
 systems</span>

/*--------------与问题相关的css------------------*/
.字{
位置：绝对位置；
宽度：100%；
不透明度：0；
空白：预处理；
}
.text_动画{
字体重量：600！重要；
边距：0！重要；
线高：5.944rem；
}
/*--------------您不必担心的css-----------------*/
/*------------但包含在代码段功能中------------------*/
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:600）；
.不可见的文本{
颜色：透明！重要；
线高：5.944rem；
字体重量：600！重要；
保证金：0；
}
.旋转文本容器{
位置：相对位置；
宽度：100%；
}
.我的文字{
位置：绝对位置；
宽度：100%；
左：0；
高度：400px；
顶部：12px；
}
.kb_{
线高：5.944rem；
}
.kb_文本{
显示：块；
垂直对齐：顶部；
保证金：0；
字号：600；
字体大小：4.833rem；
}
@媒体屏幕和屏幕（最大宽度：990px）{
.kb_文本{
字体大小：4.278rem；
}
.text_动画，
.kb_，
.不可见的文本{
线高：5.278雷姆；
}
}
@媒体屏幕和屏幕（最大宽度：765px）{
.kb_文本{
字号：3.722rem；
}
.text_动画，
.kb_，
.不可见的文本{
线高：4.5雷姆；
}
}
@媒体屏幕和屏幕（最大宽度：550px）{
.kb_文本{
字体大小：3.278rem；
}
.text_动画，
.kb_，
.不可见的文本{
线高：4.5雷姆；
}
}
.信{
显示：内联块；
位置：相对位置；
浮动：左；
变换：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）；
}
紫藤{
颜色：灰色；
}
伯利兹先生{
颜色：黑色；
}
.石榴{
颜色：红色；
}
格林先生{
颜色：#16a085；
}
.午夜{
颜色：#2c3e50；
}

解决创意与类别交叉点的问题
解决

创造力＆；
类别
表格＆；
功能
风格＆；
系统

空白：pre

保留所有空白。额外的空格是因为您在换行后缩进了单词`

使用

空白：行前

保留换行符，但折叠其他空白

var creativityAndCategories=document.querySelector（“.石榴”）；
var styleAndSystems=document.querySelector（'.belize'）；
var formAndFunction=document.querySelector（'.wisteria'）；
factorForWidth（）；
函数factorForWidth（）{
var mywidth=window.innerWidth；
如果（mywidth<1170）{}
}
var words=document.getElementsByClassName（'word'）；
var wordArray=[]；
var-currentWord=0；
单词[currentWord].style.opacity=1；
for（var i=0；i=7）{
nw[i].style.color=“#71acc1”；
}
}
如果（nw.length==23）{
如果（i<11）{
nw[i].style.color=“#d67c5c”；
}
如果（i==11）{
nw[i].style.color=“黑色”；
}
如果（i>=12）{
nw[i].style.color=“#71acc1”；
}
}
animateLetterIn（西北，i）；
}
currentWord=（currentWord==wordArray.length-1）？0:currentWord+1；
}
函数animateLetterOut（cw，i）{
setTimeout（函数（）{
cw[i].className='letter out'；
}，i*80）；
}
函数animateLetterIn（nw，i）{
setTimeout（函数（）{
nw[i].className='letter in'；
}，340+（i*80））；
}
函数拆分字母（word）{
var content=word.innerHTML；
word.innerHTML=''；
var字母=[]；
对于（变量i=0；i
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:600）；
.不可见的文本{
颜色：透明！重要；
线高：5.944rem；
字体重量：600！重要；
保证金：0；
}
.旋转文本容器{
位置：相对位置；
宽度：100%；
}
.我的文字{
位置：绝对位置；
宽度：100%；
左：0；
高度：400px；
顶部：12px；
}
.kb_{
线高：5.944rem；
}
.kb_文本{
显示：块；
垂直对齐：顶部；
保证金：0；
字号：600；
字体大小：4.833rem；
}
.text_动画{
字体重量：600！重要；
边距：0！重要；
线高：5.944rem；
}
@媒体屏幕和屏幕（最大宽度：990px）{
.kb_文本{
字体大小：4.278rem；
}
.text_动画，
.kb_，
.不可见的文本{
线高：5.278雷姆；
}
}
@媒体屏幕和屏幕（最大宽度：765px）{
.kb_文本{
字号：3.722rem；
}
.text_动画，
.kb_，
.不可见的文本{
线高：4.5雷姆；
}
}
@媒体屏幕和屏幕（最大宽度：550px）{
.kb_文本{
字体大小：3.278rem；
}