保留分割成單獨 HTML 元素的一行文字的字體間距-PHP中文網路問答

文章專題學習下載問答程式設計字典遊戲最近更新

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

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

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

429

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