単語を個別の HTML 要素に分割し、アニメーションを介して個別に配置できるようにするという一般的な手法を再作成しようとしています。
私が抱えている問題は、単語が別々の要素に分割されると、単語間のスペースが失われることです。各単語の後に を使用してレンダリングするか、各要素にパディングを追加することでスペースを追加できますが、手動でスペースを追加したり、コンテナ上に曲線を付けたりせずにこれを行う方法があるかどうか知りたいです元の間隔を維持しますか？
gsap SplitText のようなプラグインがあることは知っていますが、プラグイン以外のソリューションを期待していました。
コードペンはここにあります。
ああああ
P粉3846792662023-09-11 17:16:51
正規表現 /\b/ を使用できます。これにより、単語の境界が検索され、単語とスペースで行が分割されます。