如何在我的＆字符后添加换行符，而不是代码片段中显示的问题添加额外的空间，而不是换行符？

问题描述

我正在尝试在三个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是＆符。我想在此“＆”号之后直接创建一个换行符（并尝试使用上面显示的空白和物理新行）。

我已经创建了this lovely codepen的个性化版本，但遇到了问题。我正在使用white-space: pre-wrap;向每个span中添加一个带有旋转文本的换行符。之所以使用此特定的CSS属性，是因为我已经尝试使用<br>，\n，\r\n，␤，␤，{ {1}}和
，但没有运气（有和没有应用
属性）。我设法用下面的代码片段重新创建了这个问题。我想念什么吗？没有使用white-space属性的话，还有更好的方法吗？

TLDR；我无法在white-space中的“＆”号后创建换行符。 span已设置动画。

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

span

//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,.invisible_text {
    line-height: 4.5rem;
  }
}

@media screen and (max-width: 550px) {
  .kb_text {
    font-size: 3.278rem;
  }
  .text_animation,.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;
}

解决方法

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

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

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,.invisible_text {
    line-height: 4.5rem;
  }
}

@media screen and (max-width: 550px) {
  .kb_text {
    font-size: 3.278rem;
  }
  .text_animation,.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>

,

对于遇到这个问题的人来说，我想出了办法：

由于每个单独的字母都是span，因此不要使用换行符，而应将新行中所需的span设置为display: block;。 display: block; span之后和之前的每个跨度都应设置为display: inline-block;（如果您正在寻找类似下面所示的输出）。我将以代码段为例，其中&之后的单词在窗口大小小于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,.invisible_text{
      line-height: 5.278rem;
    }
  }
  @media screen and (max-width: 765px){
    .kb_text{
      font-size: 3.722rem;
    }
    .text_animation,.invisible_text{
      line-height: 4.5rem;
    }
  }
  @media screen and (max-width: 550px){
    .kb_text{
      font-size: 3.278rem;
    }
    .text_animation,.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.19);
  }

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

  .letter.in {
    transform: rotateX(0deg);
    transition: transform 0.38s cubic-bezier(0.175,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>