H1 html 标记似乎没有空格答案

【问题标题】：H1 html tagging does not seems to have spacesH1 html 标记似乎没有空格
【发布时间】：2021-02-06 01:01:40
【问题描述】：

我是 HTML 的新手，我正在尝试一些简单的动画。在教程的帮助下，我可以做一些简单的动画，但不知何故，尽管放置了空格，但我的 h1 类文本似乎没有空格。基于 w3school 代码编辑器，在 h1 类中添加空格就足够了。

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_class

const text = document.querySelector(".hello");
const strText = text.textContent;
const splitText = strText.split(" ");

text.textContent = "";

for (let i = 0; i < splitText.length; i++) {
  text.innerHTML += "<span>" + splitText[i] + "</span>";
}

let char = 0;
let timer = setInterval(onTick, 50);

function onTick() {
  const span = text.querySelectorAll('span')[char];
  span.classList.add('fade');
  char++;
  if (char === splitText.length) {
    complete();
    return;
  }
}

function complete() {
  clearInterval(timer);
  timer = null;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: black;
}

h1 {
  color: white;
  font-size: 4rem;
  font-family: sans-serif;
}

span {
  opacity: 0;
  transition: all 1s ease;
  transform: translateY(50px);
  display: inline-block;
}

span.fade {
  opacity: 1;
  color: red;
  transform: translateY(0px);
}

&lt;h1 class="hello"&gt;Testing 1 2 3&lt;/h1&gt;

【问题讨论】：

text.innerHTML += "" + splitText[i] + "&nbsp;"; 或调整您的 CSS 以在您的跨度周围添加一些填充：span { padding-right: 1pt; }

标签： javascript html css

【解决方案1】：

您的代码在字符串中搜索要使用strText.split(" "); 分割的空格。空格然后丢失。要恢复它们，请在使用 text.innerHTML += "" + splitText[i] + " "; 或 text.innerHTML += "" + splitText[i] + "&nbsp;"; 重新构建字符串时添加它们。

const text = document.querySelector(".hello");
const strText = text.textContent;
const splitText = strText.split(" ");

text.textContent = "";

for (let i = 0; i < splitText.length; i++) {
  text.innerHTML += "<span>" + splitText[i] + "</span> ";
}

let char = 0;
let timer = setInterval(onTick, 50);

function onTick() {
  const span = text.querySelectorAll('span')[char];
  span.classList.add('fade');
  char++;
  if (char === splitText.length) {
    complete();
    return;
  }
}

function complete() {
  clearInterval(timer);
  timer = null;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: black;
}

h1 {
  color: white;
  font-size: 4rem;
  font-family: sans-serif;
}

span {
  opacity: 0;
  transition: all 1s ease;
  transform: translateY(50px);
  display: inline-block;
}

span.fade {
  opacity: 1;
  color: red;
  transform: translateY(0px);
}

&lt;h1 class="hello"&gt;Testing 1 2 3&lt;/h1&gt;

【讨论】：