如何在我的“&”字符后添加一个换行符，而不是我的代码片段中显示的问题（添加额外的 space，而不是换行符）？

Question

我正在尝试在三个 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>

在上面的代码中，&#65286 是与号 (&)。我想在这个符号之后直接创建一个换行符（并尝试使用白色 space 和上面显示的物理换行符）。

我创建了 this lovely codepen 的个性化版本，但运行遇到了问题。我正在使用 white-space: pre-wrap; 在每个带有旋转文本的 span 中添加一个换行符。我之所以使用这个特定的 css 属性是因为我已经尝试过使用 <br>、\n、\r\n、␤ , ␤, , 和 
 没有运气（应用和不应用 white-space 属性）。我已经设法用下面的代码片段重现了这个问题。我错过了什么吗？有没有更好的方法来解决这个问题而不使用 white-space 属性?

TLDR；我无法在 span 中的 & 符号后创建换行符。 span 是动画的。

编辑：我在代码片段中添加了一些注释，以突出显示我认为是导致此问题的代码。请参阅 .js 和 .css 片段顶部的评论。

//not necessary to read through all of this, only thing that might be important is that 
//each character in the original span is taken as a single letter for animation purposes
// (see line 25 for change word function)

var creativityAndCategories = document.querySelector('.pomegranate');
var styleAndSystems = document.querySelector('.belize');
var formAndFunction = document.querySelector('.wisteria');

factorForWidth();

function factorForWidth() {
  var mywidth = window.innerWidth;
  if (mywidth < 1170) {}
}

var words = document.getElementsByClassName('word');
var wordArray = [];
var currentWord = 0;

words[currentWord].style.opacity = 1;
for (var i = 0; i < words.length; i++) {
  splitLetters(words[i]);
}

function changeWord() {
  var cw = wordArray[currentWord];
  var nw = currentWord == words.length - 1 ? wordArray[0] : wordArray[currentWord + 1];
  for (var i = 0; i < cw.length; i++) {
    animateLetterOut(cw, i);
  }

  for (var i = 0; i < nw.length; i++) {
    nw[i].className = 'letter behind';
    nw[0].parentElement.style.opacity = 1;
    if (nw.length == 15) {
      if (i < 5) {
        nw[i].style.color = "#d67c5c";
      }
      if (i == 5 || i == 6) {
        nw[i].style.color = "black";
      }
      if (i >= 7) {
        nw[i].style.color = "#71acc1";
      }
    }
    if (nw.length == 23) {
      if (i < 11) {
        nw[i].style.color = "#d67c5c";
      }
      if (i == 11) {
        nw[i].style.color = "black";
      }
      if (i >= 12) {
        nw[i].style.color = "#71acc1";
      }
    }
    animateLetterIn(nw, i);
  }

  currentWord = (currentWord == wordArray.length - 1) ? 0 : currentWord + 1;
}

function animateLetterOut(cw, i) {
  setTimeout(function() {
    cw[i].className = 'letter out';
  }, i * 80);
}

function animateLetterIn(nw, i) {
  setTimeout(function() {
    nw[i].className = 'letter in';
  }, 340 + (i * 80));
}

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';
    letter.innerHTML = content.charAt(i);
    word.appendChild(letter);
    letters.push(letter);
  }

  wordArray.push(letters);
}

changeWord();
setInterval(changeWord, 5000);

/* ---------------- css that relates to the issue ------------------*/
.word {
  position: absolute;
  width: 100%;
  opacity: 0;
  white-space: pre;
}

.text_animation {
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 5.944rem;
}


/* ---------------- css you don't have to worry about --------------------- */
/* ------------- but is included for snippet functionality --------------- */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
.invisible_text {
  color: transparent !important;
  line-height: 5.944rem;
  font-weight: 600 !important;
  margin: 0;
}

.rotating_text_container {
  position: relative;
  width: 100%;
}

.my_rotating_text {
  position: absolute;
  width: 100%;
  left: 0;
  height: 400px;
  top: 12px;
}

.kb_rotating {
  line-height: 5.944rem;
}

.kb_text {
  display: block;
  vertical-align: top;
  margin: 0;
  font-weight: 600;
  font-size: 4.833rem;
}

@media screen and (max-width: 990px) {
  .kb_text {
    font-size: 4.278rem;
  }
  .text_animation,
  .kb_rotating,
  .invisible_text {
    line-height: 5.278rem;
  }
}

@media screen and (max-width: 765px) {
  .kb_text {
    font-size: 3.722rem;
  }
  .text_animation,
  .kb_rotating,
  .invisible_text {
    line-height: 4.5rem;
  }
}

@media screen and (max-width: 550px) {
  .kb_text {
    font-size: 3.278rem;
  }
  .text_animation,
  .kb_rotating,
  .invisible_text {
    line-height: 4.5rem;
  }
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}

.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  transform: rotateX(-90deg);
}

.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wisteria {
  color: gray;
}

.belize {
  color: black;
}

.pomegranate {
  color: red;
}

.green {
  color: #16a085;
}

.midnight {
  color: #2c3e50;
}

<div class="rotating_text_container">
  <p class="invisible_text kb_text">Solving problems at the intersection of creativity & categories</p>
  <div class="my_rotating_text">
    <p class="text_animation kb_text">Solving problems at the intersection of</p>
    <p class="kb_text kb_rotating">
      <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>
    </p>
  </div>
</div>

Answer 1

white-space: pre 保留所有 white-space。额外的空格是因为您在换行符后缩进了单词。 `

使用white-space: pre-line保留换行符，但折叠其他white-space。

var creativityAndCategories = document.querySelector('.pomegranate');
var styleAndSystems = document.querySelector('.belize');
var formAndFunction = document.querySelector('.wisteria');

factorForWidth();

function factorForWidth() {
  var mywidth = window.innerWidth;
  if (mywidth < 1170) {}
}

var words = document.getElementsByClassName('word');
var wordArray = [];
var currentWord = 0;

words[currentWord].style.opacity = 1;
for (var i = 0; i < words.length; i++) {
  splitLetters(words[i]);
}

function changeWord() {
  var cw = wordArray[currentWord];
  var nw = currentWord == words.length - 1 ? wordArray[0] : wordArray[currentWord + 1];
  for (var i = 0; i < cw.length; i++) {
    animateLetterOut(cw, i);
  }

  for (var i = 0; i < nw.length; i++) {
    nw[i].className = 'letter behind';
    nw[0].parentElement.style.opacity = 1;
    if (nw.length == 15) {
      if (i < 5) {
        nw[i].style.color = "#d67c5c";
      }
      if (i == 5 || i == 6) {
        nw[i].style.color = "black";
      }
      if (i >= 7) {
        nw[i].style.color = "#71acc1";
      }
    }
    if (nw.length == 23) {
      if (i < 11) {
        nw[i].style.color = "#d67c5c";
      }
      if (i == 11) {
        nw[i].style.color = "black";
      }
      if (i >= 12) {
        nw[i].style.color = "#71acc1";
      }
    }
    animateLetterIn(nw, i);
  }

  currentWord = (currentWord == wordArray.length - 1) ? 0 : currentWord + 1;
}

function animateLetterOut(cw, i) {
  setTimeout(function() {
    cw[i].className = 'letter out';
  }, i * 80);
}

function animateLetterIn(nw, i) {
  setTimeout(function() {
    nw[i].className = 'letter in';
  }, 340 + (i * 80));
}

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';
    letter.innerHTML = content.charAt(i);
    word.appendChild(letter);
    letters.push(letter);
  }

  wordArray.push(letters);
}

changeWord();
setInterval(changeWord, 5000);

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
.invisible_text {
  color: transparent !important;
  line-height: 5.944rem;
  font-weight: 600 !important;
  margin: 0;
}

.rotating_text_container {
  position: relative;
  width: 100%;
}

.my_rotating_text {
  position: absolute;
  width: 100%;
  left: 0;
  height: 400px;
  top: 12px;
}

.kb_rotating {
  line-height: 5.944rem;
}

.kb_text {
  display: block;
  vertical-align: top;
  margin: 0;
  font-weight: 600;
  font-size: 4.833rem;
}

.text_animation {
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 5.944rem;
}

@media screen and (max-width: 990px) {
  .kb_text {
    font-size: 4.278rem;
  }
  .text_animation,
  .kb_rotating,
  .invisible_text {
    line-height: 5.278rem;
  }
}

@media screen and (max-width: 765px) {
  .kb_text {
    font-size: 3.722rem;
  }
  .text_animation,
  .kb_rotating,
  .invisible_text {
    line-height: 4.5rem;
  }
}

@media screen and (max-width: 550px) {
  .kb_text {
    font-size: 3.278rem;
  }
  .text_animation,
  .kb_rotating,
  .invisible_text {
    line-height: 4.5rem;
  }
}

.word {
  position: absolute;
  width: 100%;
  opacity: 0;
  white-space: pre-line;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}

.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  transform: rotateX(-90deg);
}

.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wisteria {
  color: gray;
}

.belize {
  color: black;
}

.pomegranate {
  color: red;
}

.green {
  color: #16a085;
}

.midnight {
  color: #2c3e50;
}

<div class="rotating_text_container">
  <p class="invisible_text kb_text">Solving problems at the intersection of creativity & categories</p>
  <div class="my_rotating_text">
    <p class="text_animation kb_text">Solving problems at the intersection of</p>
    <p class="kb_text kb_rotating">
      <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>
      <!--<span class="word green">beautiful.</span>
      <span class="word midnight">cheap.</span>-->
    </p>
  </div>
</div>

Answer 2

对于遇到这个问题的任何人，我都弄明白了：

不要使用换行符，因为每个单独的字母都是 span，您应该将新行上想要的 span 设置为 display: block;。 display: block; span 之后和之前的每个跨度都应设置为 display: inline-block;（如果您正在寻找如下所示的输出）。我将以代码片段为例，其中 & 之后的单词在 window 大小低于 900px 之后的换行符上。

此外，对于此方法，我根本没有使用 white-space 属性。

 var creativityAndCategories = document.querySelector('.pomegranate');
  var styleAndSystems = document.querySelector('.belize');
  var formAndFunction = document.querySelector('.wisteria');
  var invisibleText = document.querySelector('.invisible_text');
  var width;
  window.addEventListener("resize", factorWidth);
  factorWidth();
  function factorWidth(){
    width = window.innerWidth;
  }
  
  
  var words = document.getElementsByClassName('word');
  var wordArray = [];
  var currentWord = 0;

  words[currentWord].style.opacity = 1;
  for (var i = 0; i < words.length; i++) {
    splitLetters(words[i]);
  }

  function changeWord() {
    var cw = wordArray[currentWord];
    var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1];
    for (var i = 0; i < cw.length; i++) {
      animateLetterOut(cw, i);
    }

    for (var i = 0; i < nw.length; i++) {
      nw[i].className = 'letter behind';
      nw[0].parentElement.style.opacity = 1;
      if(nw.length == 19 && nw[0].innerHTML == "s"){
      if(i < 5){
        nw[i].style.color = "#d67c5c";
      }
      if(i == 9){
        nw[i].style.color = "black";
      }
      if(i == 11 && width < 900){
        nw[i].style.display = "block";
        invisibleText.innerHTML = "Solving problems at the intersection of<br>creativity &<br>categories";
      }
        if(i == 11 && width > 900){
        nw[i].style.display = "inline-block";
        invisibleText.innerHTML = "Solving problems at the intersection of<br>creativity & categories";
      }
      if(i >= 10){
        nw[i].style.color = "#71acc1";
      }
      }
    if(nw.length == 19 && nw[0].innerHTML == "f"){
      if(i < 5){
        nw[i].style.color = "#d67c5c";
      }
      if(i == 7){
        nw[i].style.color = "black";
      }
      if(i == 10 && width < 900){
        nw[i].style.display = "block";
        invisibleText.innerHTML = "Solving problems at the intersection of<br>creativity &<br>categories";
      }
      if(i == 10 && width > 900){
        nw[i].style.display = "inline-block";
        invisibleText.innerHTML = "Solving problems at the intersection of<br>creativity & categories";
      }
      
      if(i >= 11){
        nw[i].style.color = "#71acc1";
      }
    }
      if(nw.length == 27){
        if(i < 11){
          nw[i].style.color = "#d67c5c";
        }
        if(i == 13){
          nw[i].style.color = "black";
        }
      if(i == 16 && width < 900){
        nw[i].style.display = "block";
        invisibleText.innerHTML = "Solving problems at the intersection of<br>creativity &<br>categories";
      }
        if(i == 16 && width > 900){
        nw[i].style.display = "inline-block";
        invisibleText.innerHTML = "Solving problems at the intersection of<br>creativity & categories";
      }
        if(i >= 14){
          nw[i].style.color = "#71acc1";
        }
      }
      animateLetterIn(nw, i);
    }

    currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1;
  }

  function animateLetterOut(cw, i) {
    setTimeout(function() {
          cw[i].className = 'letter out';
    }, i*80);
  }

  function animateLetterIn(nw, i) {
    setTimeout(function() {
          nw[i].className = 'letter in';
    }, 340+(i*80));
  }

  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';
      letter.innerHTML = content.charAt(i);
      word.appendChild(letter);
      letters.push(letter);
    }

    wordArray.push(letters);
  }

  changeWord();
  setInterval(changeWord, 5000);

  @import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

  
  .invisible_text{
    color: transparent !important;
    line-height: 5.944rem;
    font-weight: 600 !important;
    margin: 0;
  }
  
  .rotating_text_container{
    position: relative;
    width: 100%;
  }

  .my_rotating_text {
    position: absolute;
    width: 100%;
    left: 0;
    height: 400px;
    top: 12px;
  }
  
  .kb_rotating{
    line-height: 5.944rem;
  }

   .kb_text{
    display: block;
    vertical-align: top;
    margin: 0;
    font-weight: 600;
    font-size: 4.833rem;
  }
  
  .text_animation{
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 5.944rem;
  }
  
  @media screen and (max-width: 990px){
    .kb_text{
      font-size: 4.278rem;
    }
    .text_animation, .kb_rotating, .invisible_text{
      line-height: 5.278rem;
    }
  }
  @media screen and (max-width: 765px){
    .kb_text{
      font-size: 3.722rem;
    }
    .text_animation, .kb_rotating, .invisible_text{
      line-height: 4.5rem;
    }
  }
  @media screen and (max-width: 550px){
    .kb_text{
      font-size: 3.278rem;
    }
    .text_animation, .kb_rotating, .invisible_text{
      line-height: 4.5rem;
    }
  }


  .word {
    position: absolute;
  display: block;
    width: 100%;
    opacity: 0;
  }

  .letter {
    display: inline-block;
    position: relative;
    transform: translateZ(25px);
    transform-origin: 50% 50% 25px;
  }

  .letter.out {
    transform: rotateX(90deg);
    transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  .letter.behind {
    transform: rotateX(-90deg);
  }

  .letter.in {
    transform: rotateX(0deg);
    transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .wisteria {
    color: gray;
  }

  .belize {
    color: black;
  }

  .pomegranate {
    color: transparent;
  }
  .green {
    color: #16a085;
  }

  .midnight {
    color: #2c3e50;
  }

<div class="rotating_text_container"> 
  <p class="invisible_text kb_text">Solving problems at the intersection of<br>creativity & categories</p>
  <div class="my_rotating_text">
    <p class="text_animation kb_text">Solving problems at the intersection of</p>
    <p class="kb_text kb_rotating">
      <span class="word pomegranate text_animation">creativity &#8239; &#65286; &#8239; categories</span>
      <span class="word wisteria text_animation">form &#8239; &#65286; &#8239; function</span>
      <span class="word belize text_animation">style &#8239; &#65286; &#8239; systems</span>
      <!--<span class="word green">beautiful.</span>
      <span class="word midnight">cheap.</span>-->
    </p>
  </div>
</div>

如何在我的“&”字符后添加一个换行符，而不是我的代码片段中显示的问题（添加额外的 space，而不是换行符）？

How can I add a newline after my "&" characters, instead of the issue shown in my code snippet (adding extra space, not line breaks)?

html

javascript

css

newline