保留分割成单独 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>