Question

我有一个动画<h1>，其中副标题从右边逐字逐句飞过。

副标题分为两部分。

在第一部分（在子弹之前），我希望根除所有空间。
在第二部分（子弹之后），我希望保留所有空格。

奇怪的是，随着字母和空格的飞入，屏幕上的空格不可见。

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

DOM中存在 do 空格 - 您可以在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 Inspector中检查它，改变行

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

不显示包含单个空格的内联块<span>

1 个答案: