[개발일기] white-space

(2023.05.28) 개발을 하다보면 코드에서 공백을 만들 일이 있다. 이것을 css에서 처리하는 방식이 white-space이다.

문법은 있는 그대로 배우면 된다. 그래서 여기 정리해두고 나중에 까먹으면 다시 들춰보려 한다.

 

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

 

normal이 기본값이다.

속성값별로 세가지 부분에서 차이가 난다

 

속성값	코드에서 공백(스페이스 또는 탭)	코드에서 줄바꿈	화면에서 자동 줄바꿈
normal	병합	병합	O
nowrap	병합	병합	X
pre	보존	보존	X
pre-wrap	보존	보존	O
pre-line	병합	보존	O

두번째 '코드상 줄바꿈'은 코드에서 줄바꿈이 되었을 때 화면에서 어떻게 처리하느냐이다.

병합은 1개의 공백으로 바꾸는 것이며 보존은 있는 그대로 출력하는 것이다.

세번째 '화면에서 자동 줄바꿈'은 내용이 영역을 벗어날때 처리방법이다. 그래서 X이면 가로스크롤이 생긴다.

 

외우지 말고 내용을 이해하자.

잘 찾아서 쓰자.