줄바꿈 공백처리 white-space

오늘 업무 중 받아온 API 데이터가

-안녕하세요. -안내문구입니다 -사전에 예약하지 않은....

등으로 쭉 이어진 문장을 공백을 주어 나눠줘야하는 일이 있었다. 보자마자 split으로 나눠주려 했으나 이전에 사용했던 다른 분들의 코드를 보니 css중 white-space를 써서 사용한 것을 알게 되었고 참고하여 진행했다. 정말 간단하게 해결할 수 있는 걸 굳이 무겁게 풀지말고 white-space에 대해 정리해보자

white-space

white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성이다.
white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | inherit

     		스페이스와 탭1	줄바꿈2	자동 줄바꿈3
normal			병합	        병합	        O
nowrap			병합	        병합	        X
pre				보존	        보존	        X
pre-wrap		보존	        보존	        O
pre-line		병합	        보존	        O  

initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

1. 스페이스와 탭의 처리 방법입니다. 병합은 1개의 공백으로 바꾸는 것이고, 보존은 입력된 그대로 출력하는 것입니다.
2. 줄바꿈의 처리방법입니다. 병합은 1개의 공백으로 바꾸는 것이고, 보존은 입력된 그대로 출력하는 것입니다.
3. 내용이 영역의 크기를 벗어날 때 처리방법입니다. O는 자동으로 줄바꿈하여 영역 내에 내용을 표시하는 것이고, X는 영역을 벗어나더라도 입력된 대로 출력하는 것입니다.