所以我有一个问题，我的代码，当我的JavaScript类型的一个词(例如:玩家)，它限制在一定的宽度，并最终垂直而不是水平。
下面是文本的所有类和代码:
// 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"> </span>
</h1>
</div>
</body>我有一个flexbox，它修复了它，增加了3行，使它看起来很奇怪，所以这是一个开始。
我注意到CSS中打字机注释下的类都没有解决这个问题。我认为它必须与其他两个或JavaScript做一些事情。
将max-width改为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;
}