[css] white-space nowrap

css 왕초보로서 기초없이 했을때 많이 봤던게
white-space nowrap 이였다.

이게 도대체 뭐지..

html에 공백 space를 아무리 쳐도 안나오는 이유를 white-space를 보고 알게 되었다.

이제 그것을 정리해 보자.

기본값은 normal

white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성.

문법은
white-space: normal } nowrap | pre | pre_wrap | pre-line | initial | inherit

스페이스와 탭 | 줄바꿈 | 자동 줄바꿈
순으로 내용을 정리를 해보면

normal 병합 | 병합 | O
nowrap 병합 | 병합 | O
pre 보존 | 보존 | X
pre-wrap 보존 | 보존 | X
pre-line 병합 | 보존 | O

1. 연속된 스페이스와 탭의 처리방법:
병합 : 공백 또는 탭이 여러개 있어도 1개의 공백으로 바꿈
보존 : 공백 또는 탭이 여러개 있으면 입력된 그대로 출력

2. 줄바꿈 처리 방법:
병합 : 엔터가 여러개 있어도 1개의 공백으로 바꿈
보존 : 엔터가 여러개 있으면 입력된 그대로 출력

3. 내용이 영역의 크기를 벗어날 때 처리방법:
O : 자동 줄바꾸맣여 영역 내에 내용을 표ㅣ
X : 영역을 벗어나더라도 입력된 대로 출력