Прокрутка, показывающая текстовую анимацию ⇐ CSS

[Anonymous]

Я работаю над веб-страницей, на которой я хочу, чтобы текст вел себя определенным образом, когда он переполняет контейнер: вместо разрыва в середине слова все слово должно перемещаться на следующую строку.
Вот что я сделал на данный момент:
Я добавил следующие свойства CSS для управления разрывом слов:

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

word-break: keep-all;
overflow-wrap: normal;
word-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;

Вот полный фрагмент моего кода, включая JavaScript для анимации и структуру HTML:

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

class Lenis {
constructor(options) {
this.options = options;
this.currentScroll = 0;
}

raf(time) {
// Dummy implementation for smooth scroll effect
this.currentScroll += (window.scrollY - this.currentScroll) * this.options.easing(0.1);
}

destroy() {
// Clean-up if necessary
}
}

function splitText(element) {
const text = element.textContent;
element.textContent = "";
const wrapper = document.createElement("div");
wrapper.style.display = "inline-block";
wrapper.style.width = "100%";

const spans = [...text].map((char) => {
const span = document.createElement("span");
span.textContent = char === " " ? "\u00A0" : char;
span.style.display = "inline-block";
wrapper.appendChild(span);
return span;
});

element.appendChild(wrapper);
return spans;
}

document.addEventListener("DOMContentLoaded", () => {
// Initialize Lenis for smooth scrolling
const lenis = new Lenis({
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
direction: "vertical",
gestureDirection: "vertical",
smooth: true,
smoothTouch: false,
touchMultiplier: 2,
});

function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}

requestAnimationFrame(raf);

window.addEventListener("unload", () => lenis.destroy());

// Reveal text animation
const revealElements = document.querySelectorAll(".reveal-type");

revealElements.forEach((element) => {
const chars = splitText(element);
const bgColor = element.dataset.bgColor;
const fgColor = element.dataset.fgColor;

chars.forEach((char) => {
char.style.color = bgColor;
});

const animateOnScroll = () => {
const rect = element.getBoundingClientRect();
const windowHeight = window.innerHeight;
const elementHeight = rect.height;

const visibleHeight = windowHeight - rect.top;
const progressLength = elementHeight * 1.2;

if (visibleHeight  {
if (index < charsToColor) {
char.style.color = fgColor;
} else {
char.style.color = bgColor;
}
});
};

animateOnScroll();
window.addEventListener("scroll", animateOnScroll);

window.addEventListener("unload", () =>  {
window.removeEventListener("scroll", animateOnScroll);
});
});
});

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

body {
margin: 0;
font-family: "Inter", sans-serif;
background: rgb(5, 4, 4);
}

section {
min-height: auto;
margin: 2rem auto;
padding: 2rem clamp(1rem, 5vw, 4rem);
display: grid;
place-content: center;
box-sizing: border-box;
}
section p {
font-size: clamp(1.2rem, 5vw, 9rem);
word-break: keep-all;
overflow-wrap: normal;
word-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
}
section:nth-of-type(1) {
border: 1px solid black;
height: auto;
padding: 0;
display: flex;
justify-content: center;
align-items: flex-start;
}
section:nth-of-type(1) img {
max-width: 100%;
height: auto;
-o-object-fit: cover;
object-fit: cover;
}
section:nth-of-type(2) {
max-width: 100%;
margin: 0 auto;
transform: translateX(0);
}/*# sourceMappingURL=main.css.map */

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

  
[img]example[/img]



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Как видите, я уже добавил

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

      word-break: keep-all;
overflow-wrap: normal;
word-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;

Проблема
Несмотря на добавление этих свойств CSS, слова по-прежнему разрываются посередине и переносятся на следующие линия. Я ожидал, что все слово переместится на следующую строку, если оно не поместится
Что я пробовал
< сильный>1. Использование разрыва слов: Keep-All, который, насколько я понимаю, должен предотвращать разрыв слов посередине.
2. Объединив его с переносом по переполнению: нормальный и переносом по словам: разрыв-слово, думая, что это будет работать для всех браузеров.
3. Добавление дефисов: автоматически для корректной обработки переносов.
Однако поведение по-прежнему не соответствует моим ожиданиям. Слова продолжают разрываться в середине слова.
Моя среда
Браузер: дуга или край
Инструменты: React 19.0.0

Подробнее здесь: https://stackoverflow.com/questions/793 ... -animation