Behalten Sie den Schriftabstand für eine Textzeile bei, die in separate HTML-Elemente aufgeteilt ist

Question

Ich versuche, eine gängige Technik zum Aufteilen von Wörtern in separate HTML-Elemente nachzubilden, damit sie per Animation individuell positioniert werden können.

Das Problem, das ich habe, ist, dass ich den Abstand zwischen den Wörtern verliere, wenn sie in einzelne Elemente aufgeteilt werden. Ich kann Abstände hinzufügen, indem ich nach jedem Wort mit   rendere oder jedem Element einen Abstand hinzufüge, aber ich frage mich, ob es eine Möglichkeit gibt, dies zu tun, ohne manuell Abstände hinzuzufügen/sie zum Container zu biegen und den ursprünglichen Abstand beizubehalten?

Ich weiß, dass es Plugins wie gsap SplitText gibt, aber ich hatte auf eine Lösung ohne Plugins gehofft.

Code Pen ist da.

const App = () => {
  const line = 'this is a line of text.';
  const renderLine = line.split(' ').map((word, i) => {
    return (
      <span key={i}>{word}&nbsp;</span>
    )
  })

  return (
    <h1>{renderLine}</h1>
  )
}

Answer 1

您可以使用正则表达式 /\b/ 这将搜索单词边界并按单词和空格分割行。

function App() {
  const line = "this is a line of text.";
  const renderLine = line.split(/\b/).map((word, i) => {
    return <span key={i}>{word}</span>;
  });

  return <h1>{renderLine}</h1>;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>