별도의 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/ 단어 경계를 검색하고 단어와 공백으로 줄을 나눕니다.

으아악 으아악