white-space

👩‍💻 개요

개행문자, 스페이스, 탭, 자동 줄바꿈, 줄 끝의 공백과 같은 공백 문자들을 어떻게 처리할 지 지정하고 싶을 때 사용하는 속성.

 

 

 

 

👩‍💻 문법

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

(initial: 기본값으로 설정. inherit: 부모 요소의 값을 상속받음.)

 

 

 

 

 

👩‍💻 동작 정리

	개행문자	스페이스, 탭	자동 줄 바꿈	줄 끝의 공백
normal	병합	병합	예	제거
nowrap	병합	병합	아니오	제거
pre	유지	유지	아니오	유지
pre-wrap	유지	유지	예	넘침
pre-line	유지	병합	예	제거
break-spaces	유지	유지	예	줄 바꿈

 

참고)

'병합' : 연속된 공백을 1개의 공백으로 만들어 출력한다. 

'유지' : 연속된 공백을 입력된 그대로 출력으로 한다. 

 

자동 줄바꿈에서의 '예' : 내용이 영역의 크기를 벗어날 때 자동으로 줄바꿈을 해서 영역 내에서 내용이 전부 보이도록.

자동 줄바꿈에서의 '아니오' : 영역을 벗어나더라도 입력된 대로 출력. 

 

 

 

 

 

👩‍💻 값

normal

연속으로 있는 공백을 하나로 합친다. 

개행 문자도 다른 공백 문자와 동일하게 처리한다.

한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꾼다.

 

 

 

nowrap

연속으로 있는 공백을 하나로 합친다.

한 줄이 너무 길어서 넘치더라도 자동으로 줄을 바꾸지 않는다.

그래서 긴 텍스트에서 줄 바꿈을 원하면 <br/> 태그를 넣어줘야 한다.

 

 

화면의 크기를 조절하면 normal은 자동 줄바꿈을 하지만 nowrap은 자동줄바꿈을 하지 않고 x축 스크롤바가 생긴다.

 

 

 

 

 

 

pre

연속으로 공백이 있어도 그대로 내버려둔다. 

줄 바꿈은 개행 문자와 <br>에서 일어난다.

 

 

 

pre-wrap

연속으로 공백이 있어도 그대로 내버려둔다. 

한 줄이 너무 길어서 넘치는 경우 자동으로 줄을 바꿔준다.

줄 바꿈은 개행 문자와 <br>에서 일어난다.

 

 

 

pre-line

연속으로 공백이 있는 경우 하나로 합친다.

한 줄이 너무 길어서 넘치면 자동으로 줄을 바꿔준다.

줄 바꿈은 개행 문자와 <br>에서 일어난다.

 

 

 

break-spaces

pre-wrap과 동일하게 작동하지만 아래의 차이점들이 있다

- 연속 공백이 줄의 끝에 있더라도 공간을 그대로 차지한다.

- 연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있다.

- 유지한 연속 공백은 pre-wrap과 달리 요소 바깥으로 넘치지 않고, 공간도 차지하기 때문에

min-content나 max-content에 영향을 준다.

 

 

 

 

 

 

 

 

 

🔗 참고

https://developer.mozilla.org/ko/docs/Web/CSS/white-space

white-space - CSS: Cascading Style Sheets | MDN