Saya cuba mencipta semula teknik biasa untuk memisahkan perkataan kepada elemen HTML yang berasingan supaya ia boleh diletakkan secara individu melalui animasi.

Masalah yang saya hadapi ialah saya kehilangan jarak antara perkataan apabila ia dipisahkan kepada elemen yang berasingan. Saya boleh menambah jarak dengan merender denganselepas setiap perkataan, atau dengan menambahkan padding pada setiap elemen, tetapi saya tertanya-tanya sama ada terdapat cara untuk melakukan ini tanpa menambah jarak/membengkokkannya secara manual pada bekas dan boleh mengekalkan jarak asal?

Saya tahu terdapat pemalam seperti gsap SplitText tetapi saya mengharapkan penyelesaian bukan pemalam.

Pen kod ada di sini.

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