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

Question

I have an animated <h1> in which the subtitle flies in from the right, letter by letter.

The subtitle is divided into 2 parts.

• In the first part (before the bullet), I wish to eradicate all the spaces.

• In the second part (after the bullet), I wish to retain all the spaces.

Curiously though, as the letters and spaces fly in, the on-screen spaces are invisible .

Where there are spaces, I want to see the letters visibly separated by those spaces as they fly in.

The spaces do exist in the DOM - you can see <span> </span> in the DOM Inspector in both Chrome and Firefox. But, despite having a display style of

display: inline-block;

the spaces show up as zero width on the screen. (And they are grayed-out even in Firebug).

Here is the jsFiddle : https://jsfiddle.net/2u6uLn7d/

And here is a working example:

 var subtitle = document.getElementsByClassName('subtitle')[0]; subtitle.style.opacity = '0'; function activateSubtitle() { if (subtitle.textContent.indexOf('\•') !== -1) { var bulletIndex = (subtitle.textContent.indexOf('\•') - 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> 

NB I should probably add, if you want to slow the animation down so that you can examine it in a DOM Inspector, change the line

var eachLetter = 50; /* 0.05 seconds */

to something much higher, like:

var eachLetter = 1500; /* 1.5 seconds */

Answer 1

To prevent whitespace collapsing you can use css white-space property: https://developer.mozilla.org/en/docs/Web/CSS/white-space

Here is table of available values from link above:

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

In your case suitable values are pre and pre-wrap :

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