현인

[React] 텍스트 개행 처리 본문

개발 일기

[React] 텍스트 개행 처리

현인(Hyeon In) 2023. 10. 27. 14:44

React에서 텍스트를 표기할 때 텍스트가 길어서 개행이 필요한 경우 데이터 중간에 <br/> 태그를 삽입할 수 없다.

그래서 보통 데이터 안에 '\n'을 담아서 보내주는데, 이 또한 제대로 개행 처리가 안될 때가 있다.

이 때 아래 코드처럼 white-space 속성을 'pre-wrap'으로 변경해주면 정상적으로 개행 처리된다.

const textExam = ({ apiData }) => {
	<span style={white-space: "pre-wrap"}>
		{apiData.content}
	</span>
}

 

white-space 의 default 값은 normal 로 기존의 줄바꿈 값을 하나의 공백으로 병합(치환) 한다. pre-wrap 속성은 줄바꿈을 병합하지 않고 보존한다. pre, pre-line 값 으로도 줄바꿈이 가능하다.

더 자세한 내용은 CSS / white-space / 공백 처리 방법 정하는 속성 참고하자.


참고 자료

- https://p-iknow.netlify.app/react/how-to-handle-newline-text-from-api/

 

 

 

반응형