Conserver l'espacement des polices pour une ligne de texte divisée en éléments HTML distincts

Question

J'essaie de recréer une technique courante consistant à diviser les mots en éléments HTML distincts afin qu'ils puissent être positionnés individuellement via une animation.

Le problème que j'ai est que je perds l'espacement entre les mots lorsqu'ils sont séparés en éléments distincts. Je peux ajouter un espacement en rendant avec   après chaque mot, ou en ajoutant un remplissage à chaque élément, mais je me demande s'il existe un moyen de le faire sans ajouter manuellement d'espacement/les plier au conteneur et peut conserver l'espacement d'origine ?

Je sais qu'il existe des plugins comme gsap SplitText mais j'espérais une solution sans plugin.

Le stylo code est ici.

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

Vous pouvez utiliser des expressions régulières /b/ Cela recherchera les limites des mots et divisera les lignes par mots et espaces.

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>