将文本拆成行，文本标题拆分多个字符的方法

////.split-lines文本拆成行
      const splitLines = (container) => {
        const spans = container.children;
        let top = 0;
        let tmp = "";

        container.innerHTML = container.textContent.replace(
          /\S+/g,
          "<n>$&</n>"
        );
        for (let i = 0; i < spans.length; i++) {
          const rect = spans[i].getBoundingClientRect().top;
          if (top < rect) {
            tmp +=
              "</div></div><div class='overflow-hidden'><div class='text_inner'>";
          }
          top = rect;
          tmp += spans[i].textContent + " ";
        }

        container.innerHTML = tmp + "</div></div>";
      };
      document.querySelectorAll(".split-lines").forEach(element => {
        splitLines(element);
      });

/*title文本拆多个字符*/
const splitLetters = () => {
        document.querySelectorAll(".title").forEach((title) => {
          title.innerHTML = [...title.textContent].map((letter) =>`<span class="${letter.trim() === "" ? "empty" : ""}">${letter}</span>`).join("");
        });
      };
      splitLetters();

//滚动过程中给隐藏的文本添加动态效果
      const showParaInviewport = () => {
        const observerCallbackFun = (entries, observer) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const paraElement = entry.target;
              paraElement.classList.add("active");
              observer.unobserve(paraElement);
            }
          });
        };
        const observerOptions = {
          root: null, // Use the viewport as the root
          rootMargin: "0px 0px -20% 0px", // Trigger when 20% of the element is visible from the bottom
          threshold: 0.1, // Trigger as soon as any part of the element is visible
        };
        const observer = new IntersectionObserver(
          observerCallbackFun,
          observerOptions
        );
        document.querySelectorAll(".split-lines").forEach((paraElement) => {
          observer.observe(paraElement);
        });
      };
      showParaInviewport();