현인
[React] 텍스트 개행 처리 본문
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/
반응형
'개발 일기' 카테고리의 다른 글
echarts yAxis Label width 설정 (0) | 2024.11.27 |
---|---|
npm error code EUNSUPPORTEDPROTOCOL; npm error Unsupported URL Type "link:": link:dummy.js (1) | 2024.11.15 |
[TypeScript] 동적 키 타입 정의 (1) | 2023.10.25 |
[Javascript] Date.getHours 시간 안 맞는 문제 (1) | 2023.08.23 |
티맥스 커머스 프론트엔드 채용 후기 (4) | 2023.06.24 |