为什么我的文字会以一定的宽度垂直？

Question

所以我的代码有一个问题，当我的 JavaScript 类型的单词（例如 Gamer）限制到一定宽度并最终变为垂直而不是水平时。

以下是所有类和文本代码：

// TYPEWRITER //

const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");

const textArray = ["YouTuber", "Writer", "Designer", "Creator", "Programmer", "Gamer"]
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000;
let textArrayIndex = 0;
let charIndex = 0;

function type() {
  if(charIndex < textArray[textArrayIndex].length) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
    charIndex++;
    setTimeout(type, typingDelay);
  }
  else {
    cursorSpan.classList.remove("typing");
    setTimeout(erase, newTextDelay);
  }
}

function erase() {
  if(charIndex > 0) {
    if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent = textArray[textArrayIndex].substring(0,charIndex-1);
    charIndex--;
    setTimeout(erase, erasingDelay)
  }
  else {
    cursorSpan.classList.remove("typing");
    textArrayIndex++;
    if(textArrayIndex>=textArray.length) textArrayIndex=0;
    setTimeout(type, typingDelay + 800);
  }
}

document.addEventListener("DOMContentLoaded", function() {
  if(textArray.length) setTimeout(type, newTextDelay + 250);
});

/* CUSTOMIZATION */

body {
    margin: 0;
    padding: 0;
    background-color: #494949;
}

h1 {
    position: relative;
    font-size: 10vw;
}

/* TYPEWRITER */

.textbody {
    margin-top: 10vh;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    color: white;
}

.typed-text {
    font-weight: normal;
    color: #dd7732;
}

.cursor {
    display: inline-block; 
    width: 3px;
    background-color: #ccc;
    margin-left: 0.1rem;
    animation: blink 1s infinite;
}
.cursor.typing {
    animation: none;
}

<body>
    
    <div class="textbody">
            <h1>
                I am a <span class="typed-text"></span><span class="cursor                       typing">&nbsp;</span>
            </h1>
    </div>
</body>

我在里面有一个 flexbox，它修复了它添加 3 行并让它看起来很奇怪，所以这是一个开始。

我注意到 CSS 中 TYPEWRITER 注释下类的 none 对问题做了任何处理。我相信它必须与其他两个或 JavaScript.

做一些事情

Answer 1

将max-width更改为宽度：100%；进入 .textbody 并将其放在中心添加 display: flex;

.textbody {
    margin-top: 10vh;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    color: white;
}

为什么我的文字会以一定的宽度垂直？

Why is my text going vertical at a certain width?

html

javascript

css