保留分割成單獨 HTML 元素的一行文字的字體間距

Question

我正在嘗試重新創建一種常見技術，將單字拆分為單獨的 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}&nbsp;</span>
    )
  })

  return (
    <h1>{renderLine}</h1>
  )
}

Answer 1

您可以使用正規表示式 /\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 />);

<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>