javascript - 包含单个空格的内联 block 未显示

Question

我有一个动画 <h1>其中字幕从右边逐个字母飞入。

字幕分为两部分。

• 在第一部分(项目符号之前)，我希望消除所有空格。

• 在第二部分(项目符号之后)，我希望保留所有空格。

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

在有空格的地方，我希望看到字母在飞入时被这些空格明显分开。

空格 确实 存在于 DOM 中 - 你可以看到 <span> </span>在 Chrome 和 Firefox 的 DOM 检查器中。但是，尽管显示样式为

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 */

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;
}