保留分割成单独 HTML 元素的一行文本的字体间距-PHP中文网问答

文章专题学习下载问答编程词典手游最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

保留分割成单独 HTML 元素的一行文本的字体间距

P粉258083432 2023-09-10 18:37:01

430

我正在尝试重新创建一种常见技术，将单词拆分为单独的 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>
  )
}

P粉258083432

全部回复(1)

P粉3846792662023-09-11 17:16:51 1 楼

您可以使用正则表达式 /\b/ 这将搜索单词边界并按单词和空格分割行。

function App() {
  const line = "this is a line of text.";
  const renderLine = line.split(/\b/).map((word, i) => {
    return {word};
  });

  return {renderLine};
}

ReactDOM.createRoot(document.getElementById("root")).render();