[CSS] text-indent 사용하기. 두 번째 줄부터 들여쓰기 하려면?

두번째 줄부터 들여쓰기하기

• 기존에는 줄이 넘어가도 들여쓰기 없이 첫줄과 동일한 위치에서 시작

• <div
    ref={contentRef}
    style={{
      display: 'flex',
      alignItems: 'center',
    }}
  >
    ⦁ {t(data.title)}
  </div>

 

• 두 번째 줄부터 들여쓰기 적용 (text-indent 대신 padding-left)
  • text-indent을 사용하면 모든 줄이 들여쓰기 적용
  • 첫 줄은 그대로 두고 두 번째 줄부터 들여쓰기를 적용하려면 padding-left 또는 margin-left를 조합해서 사용

  • <div
      ref={contentRef}
      style={{
        display: 'flex',
        alignItems: 'center',
        textIndent: '-10px',
        paddingLeft: '10px',
      }}
    >
      ⦁ {t(data.title)}
    </div>

    
    

    

⇒ 의도한대로 바뀐 것을 확인