Kekalkan jarak fon untuk satu baris teks yang dibahagikan kepada elemen HTML yang berasingan

Question

Saya cuba mencipta semula teknik biasa untuk memisahkan perkataan kepada elemen HTML yang berasingan supaya ia boleh diletakkan secara individu melalui animasi.

Masalah yang saya hadapi ialah saya kehilangan jarak antara perkataan apabila ia dipisahkan kepada elemen yang berasingan. Saya boleh menambah jarak dengan merender dengan   selepas setiap perkataan, atau dengan menambahkan padding pada setiap elemen, tetapi saya tertanya-tanya sama ada terdapat cara untuk melakukan ini tanpa menambah jarak/membengkokkannya secara manual pada bekas dan boleh mengekalkan jarak asal?

Saya tahu terdapat pemalam seperti gsap SplitText tetapi saya mengharapkan penyelesaian bukan pemalam.

Pen kod ada di sini.

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

Anda boleh menggunakan ungkapan biasa /b/ Ini akan mencari sempadan perkataan dan memisahkan baris mengikut perkataan dan ruang.

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>