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

[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;
}

.navbar {
display: flex;
justify-content: center;
background-color: #111;
padding: 1rem;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
border-bottom: 2px solid #ff9500;
}

.navbar a {
color: #ff9500;
text-decoration: none;
padding: 0.5rem 1.2rem;
font-size: 1.5rem;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}

.navbar a:hover {
background-color: #552800;
transform: scale(1.1);
}

.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;
}

.typing, .intro {
font-size: 1.8rem;
white-space: nowrap;
overflow: hidden;
letter-spacing: 1px;
border-right: 2px solid #ff8c00; /* Cursor */
animation: blinkCursor 0.7s step-end infinite;
}

.intro {
height: 6rem;
}

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);
}

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




[url=home.html]Home[/url]
[url=#]Search[/url]



INFO



SEARCH

[list]
Asteroids
[*]Aliens
[*]Time Travel
[*]Galaxies
[*]Robots
[/list]

Asteroids
One of the first games ever made

Aliens
Not a stereotypical little green martian...

Time Travel
Currently impossible...

Galaxies
They're huge...

Robots
Metal consciousness...







document.addEventListener("DOMContentLoaded", function() {
runIntroAnimation();
});

function runIntroAnimation() {
const introText = document.getElementById("introText");
const introSequence = [
"!DOCTYPE html",
"html lang=en",
"head ",
"meta charset=UTF-8",
"Running file."
];

let i = 0;
function typeLine() {
if (i < introSequence.length) {
introText.innerHTML += `
${introSequence[i++]}
`;
setTimeout(typeLine, 1000);
} else {
setTimeout(() => {
document.getElementById("intro").classList.remove("active");
document.getElementById("debrief").classList.add("active");
startQuoteAnimation();
}, 1000);
}
}
typeLine();
}

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();
}

function openSection(sectionId) {
document.querySelectorAll('.section').forEach(section => {
section.classList.remove('active');
});
document.getElementById(sectionId).classList.add('active');
}

function searchFunction() {
let input = document.getElementById("searchInput").value.trim().toLowerCase();
document.querySelectorAll("#searchList li").forEach(item => {
item.style.display = item.innerText.toLowerCase().includes(input) ? "" : "none";
});
}

Что видно

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

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

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