cari

Rumah  >  Soal Jawab  >  teks badan

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

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

P粉258083432P粉258083432512 hari yang lalu709

membalas semua(1)saya akan balas

  • P粉384679266

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

    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>

    balas
    0
  • Batalbalas