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 avecaprè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 ( {word}  ) }) return ( 
{renderLine}
 ) }