如何使用 HTML、CSS、JS 在中心块中左对齐循环打字机动画文本？

Question

我使用了 Aakhya Singh 的 codepen 示例（https://codepen.io/daviddcarr/pen/XVyQMM）来创建循环打字机文本。该示例被用作基础，我将其修改为我的规范：

HTML

<div class="container py-5">
  <div class="output text-center" id="output">
    <h2 class="cursor", style="font-weight:bold; text-align:center;"></h2>
    <hr>
  </div>
</div>

CSS

.output {
  text-align:left;
  color:black;
}

/* Cursor Styling */
.cursor::before {
  content:'>';
}

.cursor::after {
  content:'';
  display:inline-block;
  margin-left:3px;
  background-color:#05AC72;
  animation-name:blink;
  animation-duration:0.5s;
  animation-iteration-count: infinite;
}
h2.cursor::after {
  height:28px;
  width:7px;
}
p.cursor::after {
  height:13px;
  width:6px;
}

@keyframes blink {
  0% {
    opacity:1;
  }
  49% {
    opacity:1;
  }
  50% {
    opacity:0;
  }
  100% {
    opacity:0;
  }
}

JS

// values to keep track of the number of letters typed, which quote to use. etc. Don't change these values.
var i = 0,
    a = 0,
    isBackspacing = false,
    isParagraph = false;

// Typerwrite text content. Use a pipe to indicate the start of the second line "|".  
var textArray = ["text to appear in typewriter"];

// Speed (in milliseconds) of typing.
var speedForward = 100, //Typing Speed
    speedWait = 1000, // Wait between typing and backspacing
    speedBetweenLines = 1000, //Wait between first and second lines
    speedBackspace = 25; //Backspace Speed

//Run the loop
typeWriter("output", textArray);

function typeWriter(id, ar) {
  var element = $("#" + id),
      aString = ar[a],
      eHeader = element.children("h2"), //Header element
      eParagraph = element.children("p"); //Subheader element

  // Determine if animation should be typing or backspacing
  if (!isBackspacing) {

    // If full string hasn't yet been typed out, continue typing
    if (i < aString.length) {

      // If character about to be typed is a pipe, switch to second line and continue.
      if (aString.charAt(i) == "|") {
        isParagraph = true;
        eHeader.removeClass("cursor");
        eParagraph.addClass("cursor");
        i++;
        setTimeout(function(){ typeWriter(id, ar); }, speedBetweenLines);

      // If character isn't a pipe, continue typing.
      } else {
        // Type header or subheader depending on whether pipe has been detected
        if (!isParagraph) {
          eHeader.text(eHeader.text() + aString.charAt(i));
        } else {
          eParagraph.text(eParagraph.text() + aString.charAt(i));
        }
        i++;
        setTimeout(function(){ typeWriter(id, ar); }, speedForward);
      }

    // If full string has been typed, switch to backspace mode.
    } else if (i == aString.length) {

      isBackspacing = true;
      setTimeout(function(){ typeWriter(id, ar); }, speedWait);

    }

  // If backspacing is enabled
  } else {

    // If either the header or the paragraph still has text, continue backspacing
    if (eHeader.text().length > 0 || eParagraph.text().length > 0) {

      // If paragraph still has text, continue erasing, otherwise switch to the header.
      if (eParagraph.text().length > 0) {
        eParagraph.text(eParagraph.text().substring(0, eParagraph.text().length - 1));
      } else if (eHeader.text().length > 0) {
        eParagraph.removeClass("cursor");
        eHeader.addClass("cursor");
        eHeader.text(eHeader.text().substring(0, eHeader.text().length - 1));
      }
      setTimeout(function(){ typeWriter(id, ar); }, speedBackspace);

    // If neither head or paragraph still has text, switch to next quote in array and start typing.
    } else { 

      isBackspacing = false;
      i = 0;
      isParagraph = false;
      a = (a + 1) % ar.length; //Moves to next position in array, always looping back to 0
      setTimeout(function(){ typeWriter(id, ar); }, 50);

    }
  }
}

现在动画开始是这样的：

将光标置于中心。

打字机效果将键入所有文本，并且文本根据出现的字符数重新居中：

最终文本将如下所示：

是否可以让打字机文本在屏幕居中左对齐，以便文本出现在相同的位置？现在，文本会移动，以便在添加/删除其他字符时重新居中。通过这种方式，我希望光标在页面中央左对齐，如下所示：

接下来的文字将从此时出现并继续循环：

我尝试过尝试使用

style="text-align:center;"

和

style="text-align:left;"

并更改

margin

但没有成功。我使用

margin

来输入一些文本，但结果看起来有所不同，具体取决于所使用的浏览器和显示器的分辨率。

我也尝试阅读这里的帖子：

CSS：将块居中，但内容向左对齐

但是我无法解决这个问题。

Answer 1

我在不依赖 typewriter.js 库的情况下解决了同样的问题。以下是我如何使用 HTML、CSS 和 JavaScript 在中心块内实现左对齐循环打字机动画文本。

首先，我创建了一个跨度数组，其中每个跨度代表文本中的一个字母。通过将这些跨度附加到父元素，我能够单独控制每个字母的显示。

接下来，我利用 JavaScript 在一定时间间隔后逐一更改每个跨度的文本颜色。这给人一种打字机效果的印象，字母逐渐出现在屏幕上。

为了确保文本在中心块内左对齐，我将 CSS 样式应用于父元素。通过使用

text-align: left

作为容器，使用

display: inline-block

作为跨度，我在中心块内实现了所需的左对齐。

要查看工作示例，您可以查看我提供的 CodePen 链接。

我希望这个解释有帮助！如果您还有任何疑问，请告诉我。

---