[HTML/CSS] /n을 개행하기

 

Vue는 v-html이라는 디렉티브를 이용하여 깔끔히 구현할 수 있지만 리액트는 없는 것으로 보인다.

 

 

방법 1. split 사용

<div className={styles.character_desc}>
  {characterInfo.ka_star_info &&
    characterInfo.ka_star_info.split('\n').map((line) => {
      return (
        <span>
          {line}
          <br />
        </span>
      )
    })}
</div>

 

 

방법 2. white-space: pre-line; 사용

'\n'만 적용된다.

&_desc {
  white-space: pre-line;
}

 

 

 

개행이 잘 되네요~

 

 

 

 

출처

React에서 줄바꿈을 하는 방법

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.