Как сделать текст, который находится под экраном на левом div (экрана разделен в 2 div влево и вправо) написать сам на п ⇐ Html

[Anonymous]

Я работаю над анимацией пишущей машинки, где текст динамически записан в левом девеловом макете с разделенным экраном (левый и правый Divs). Проблема заключается в том, что когда текст достигает нижней части левого дивирования, он продолжает писать ниже видимой области. В правильном дивировании, сохраняя весь текст в поле зрения. Я не хочу использовать полос прокрутки, то есть переполненный текст должен автоматически продолжаться на правильном DIV, а не выходить за пределы экрана. < /P>
Цель состоит остается видимым. Как я могу достичь такого поведения? < /P>

Код: Выделить всё

TOP SECRET







@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body {
font-family: 'VT323', monospace;
background-color: #000;
color: #ff9500;
margin: 0;
padding: 0;
overflow-x: hidden;
font-size: 2rem;
display: flex;
flex-direction: row;
height: 100vh;
}
.left, .right {
width: 50%;
padding: 2rem;
box-sizing: border-box;
overflow-y: hidden; /* Prevent vertical scrolling */
}

.left {
text-align: left;
}

.right {
padding-top: 6rem; /* Adjust for navbar height */
}

.section {
display: none;
padding: 4rem 2rem;
margin-top: 5rem;
}

.section.active {
display: block;
}

h1 {
font-size: 2.5rem;
text-transform: uppercase;
margin-bottom: 1rem;
}

input[type="text"] {
width: 80%;
padding: 0.8rem;
font-size: 1.2rem;
border: 2px solid #ff9500;
background-color: #111;
color: #ff9500;
border-radius: 5px;
outline: none;
margin-bottom: 1rem;
text-align: center;
}

input[type="text"]::placeholder {
color: rgba(255, 140, 0, 0.6);
}







INFO







document.getElementById("debrief").classList.add("active");

function startQuoteAnimation() {
const textElement = document.getElementById("text");
const rightTextElement = document.getElementById("rightText");
const textArray = [
"We are a Classified Agency funded by the U.S.  government...",
"Our sector [Sector 6] is tasked with intercepting all interstellar transmissions...",
"If the public knew about this, chaos would ensue...",
"It is your mission to work with us with your time here and to make sure NO ONE knows...",
"INFO",
"Task 1",
"Task 2",
"Task 3",
"Task 4"
];

let textIndex = 0, charIndex = 0;
let isLeft = true;

function typeText() {
if (textIndex < textArray.length) {
if (charIndex < textArray[textIndex].length) {
if (isLeft) {
textElement.innerHTML += textArray[textIndex].charAt(charIndex);
} else {
rightTextElement.innerHTML += textArray[textIndex].charAt(charIndex);
}
charIndex++;
setTimeout(typeText, 25);
} else {
if (isLeft) {
textElement.innerHTML += "

";
} else {
rightTextElement.innerHTML += "

";
}
textIndex++;
charIndex = 0;
if (textElement.scrollHeight > textElement.clientHeight) {
isLeft = false;
}
setTimeout(typeText, 1000);
}
}
}
typeText();
}

Что видно

Что есть, но не видно

Что я хочу делать с тем, что не видно
< /p>

Подробнее здесь: https://stackoverflow.com/questions/793 ... t-in-2-div