Why is my text going vertical at a certain width?

May 25, 2022

So I have an issue with my code where when my JavaScript types of a word (eg. Gamer) it limits to a certain width and ends up going vertical instead of horizontal.

Here are all the classes and code for the text:

// 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>

I had a flexbox in it and it fixed it adding 3 lines and making it look very weird, so that’s a start.

I noticed none of the classes under the TYPEWRITER comment in CSS do anything to the problem. I believe it has to do something with the other two or the JavaScript.

>Solution :

Change max-width to width : 100%; into the .textbody and to put it in center add 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;
}