内联块级元素 <span> 包含一个空格时不显示

Question

我有一个动画效果的标题（<h1>），其中副标题逐字从右边飞入。

副标题分为两部分：

- 第一部分（子弹符号之前）希望消除所有空格。 - 第二部分（子弹符号之后）希望保留所有空格。

但奇怪的是，当字母和空格飞入时，屏幕上的空格是不可见的。

在有空格的地方，我希望看到字母逐个飞入并通过这些空格分开。

这些空格在DOM中确实存在-您可以在Chrome和Firefox的DOM Inspector中看到<span> </span>。但是，尽管具有显示样式，

display: inline-block;

屏幕上空格显示为零宽度。(即使在Firebug中它们也是灰色的)。

这是jsFiddle链接: https://jsfiddle.net/2u6uLn7d/ 以下是一个有效的示例：

var subtitle = document.getElementsByClassName('subtitle')[0];
subtitle.style.opacity = '0';

function activateSubtitle() {

  if (subtitle.textContent.indexOf('\u2022') !== -1) {
  var bulletIndex = (subtitle.textContent.indexOf('\u2022') - 1);
  var beforeBullet = subtitle.textContent.substr(0,bulletIndex);
  var afterBullet = subtitle.textContent.substr(bulletIndex);
  beforeBullet = beforeBullet.replace(/ /g, '');
  subtitle.textContent = beforeBullet + afterBullet;
  }

  else {subtitle.textContent = subtitle.textContent.replace(/ /g, '');}
  
  var subtitleLength = subtitle.textContent.length;
  var heading = subtitle.parentNode;

  subtitle.style.opacity = '';
  subtitle.style.position = 'fixed';
  heading.classList.add('stilts');

  for (var i = 0; i < subtitleLength; i++) {
  subtitle.innerHTML += '<span>' + subtitle.textContent[i] + '</span>';
  }

  subtitle.innerHTML = subtitle.innerHTML.substr(subtitleLength);

  var eachLetter = 50;
  var allLetters = ((subtitleLength + 3) * eachLetter);

  var i = 0;
  var spans = subtitle.getElementsByTagName('span');

  var enterSubtitle = setInterval(function(){

    if (i > (subtitleLength - 2)) {clearInterval(enterSubtitle);}
    spans[i].style.WebkitTransform = 'translate(0,0)';
    spans[i].style.transform = 'translate(0,0)';
    i++;

  },eachLetter);


  setTimeout(function(){
    
    for (var i = 0; i < subtitleLength; i++) {
      var letter = spans[0].childNodes[0];
      subtitle.insertBefore(letter,spans[0]);
      subtitle.removeChild(spans[0]);
    }

    subtitle.removeAttribute('style');
    heading.classList.remove('stilts');
    if (heading.getAttribute('class') === '') {
      heading.removeAttribute('class');}

  },allLetters);
}


window.addEventListener('load',activateSubtitle,false);

h1 {
font-size: 72px;
font-weight: normal;
}

h1 .subtitle {
display: block;
font-size: 36px;
}

.subtitle span {
display: inline-block;
transform: translate(100vw,0);
transition: all .2s ease-in;
}

<h1><strong>Page</strong> Heading
<span class="subtitle">Subtitle Part 1 &bull; Part Two of the Subtitle</span>
</h1>

N.B. 我应该补充说明，如果您想要减慢动画速度以便在DOM检查器中进行检查，请更改以下行：

var eachLetter = 50; /* 0.05 seconds */

提升到更高的层次，例如：

var eachLetter = 1500; /* 1.5 seconds */

- Rounin - Standing with Ukraine

---

在.subtitle span块中添加 white-space: pre;。 - Bob Sponge

哦，什么？！原来如此简单？！太棒了@BobSponge。非常感谢你。我刚刚花了将近90分钟！如果你想把你的评论作为答案发布，我会点赞并接受。再次感谢。 - Rounin

Answer 1

为了避免空格折叠，您可以使用CSS的white-space属性： https://developer.mozilla.org/en/docs/Web/CSS/white-space 下面是上述链接中可用值的表格：

Value       New lines       Spaces and tabs     Text wrapping
==============================================================
normal      Collapse        Collapse            Wrap
nowrap      Collapse        Collapse            No wrap
pre         Preserve        Preserve            No wrap
pre-wrap    Preserve        Preserve            Wrap
pre-line    Preserve        Collapse            Wrap

在您的情况下，适当的值为pre和pre-wrap：

.subtitle span {
  display: inline-block;
  transform: translate(100vw,0);
  transition: all .2s ease-in;
  white-space: pre;
}

- Bob Sponge

---

一個非常權威的答案 - 非常感謝！ - Rounin