我正在嘗試重新創建一種常見技術，將單字拆分為單獨的 HTML 元素，以便可以透過動畫單獨定位它們。
我遇到的問題是，當它們分成單獨的元素時，我會失去單字之間的間距。透過在每個單字後面加上 進行渲染，或為每個元素添加填充，我可以添加間距，但我想知道是否有一種方法可以做到這一點，而無需手動添加間隔/將它們彎曲到容器上並可以保留原始間距？
我知道有像 gsap SplitText 這樣的插件，但我希望有非插件解決方案。
程式碼筆在這裡。
const App = () => {
const line = 'this is a line of text.';
const renderLine = line.split(' ').map((word, i) => {
return (
<span key={i}>{word} </span>
)
})
return (
<h1>{renderLine}</h1>
)
} 
您可以使用正規表示式
/\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 />);