[css] white-space 속성 알아보기

웹사이트를 개발하다보면 줄바꿈이 잘 안되어 있거나 테이블 레이아웃 안에 글들이 테이블 밖으로 삐저 나와있거나 짤리는 현상을 마주하곤 합니다. 이럴때마다 사용하게되는 CSS 속성이 바로 오늘 정리할 white-space입니다. white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떤식으로 처리할 건지 정의해주는 속성입니다.

---

특징

• 기본값 : normal
• 상속 : O
• 애니메이션 : X
• 버전 : CSS Level 1

사용법(문법)

white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | inherit

initial은 기본값인 normal로 설정하는 것이고, inherit은 부모 요소에 설정되어있는 속성값을 상속받는 것입니다.

	스페이스와 탭	줄바꿈	자동 줄바꿈
normal	1개의 공백으로 처리	1개의 공백으로 처리	O
nowrap	1개의 공백으로 처리	1개의 공백으로 처리	X
pre	그대로 출력	그대로 출력	X
pre-wrap	그대로 출력	그대로 출력	O
pre-line	1개의 공백으로 처리	그대로 출력	O

---

브라우저 지원

• Chrome : 1.0+
• FireFox : 3.5+
• Internet Explorer : 8.0+
• Opera : 9.5+
• Safari : 3.0+

참고 : https://www.codingfactory.net/10597