[css] 공백과 줄바꿈을 설정하는 white-space

white-space 속성에 대해 알아보기 전,

HTML에서의 공백은 아래와 같은 규칙을 가진다는 것을 알아두자

 

• 공백을 만들 수 있는 키(key)는 space, enter, tab
• HTML에서는 기본적으로 space, enter, tab 모두 공백 1칸으로 표시. 즉, 여러 번 입력해도 공백 1칸으로 인식함
• 행의 맨 앞에 있는 공백은 무시되어 표시되지 않음
• 만약 더 많은 공백을 표시하고 싶으면  를 연속으로 입력하면 공백으로 처리할 수 있음

 

white-space: normal;

공백, 줄바꿈, 연속되는 여러개의 공백을 모두 하나의 공백으로 처리하고 자동 줄바꿈 적용

 

white-space: nowrap;

normal과 같은 처리를 하지만 자동 줄바꿈은 되지 않음

 

white-space: pre;

공백, 줄바꿈, 연속되는 여러개의 공백이 그대로 유지되나 자동 줄바꿈은 되지 않음

 

white-space: pre-wrap;

공백, 줄바꿈, 연속되는 여러개의 공백이 그대로 유지되고 자동 줄바꿈 적용

 

white-space: pre-line;

연속된 공백은 하나의 공백으로 처리하고 줄바꿈은 유지됨

자동 줄바꿈 또한 적용

 

white-space: break-space; (브라우저 호환성 낮음)

공백, 줄바꿈, 연속되는 여러개의 공백이 그대로 유지되고 자동 줄바꿈 적용 (pre-wrap과 동일)

- 연속 공백이 줄의 끝에 위치하더라도 공간을 차지함

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

- 유지된 연속 공백은 pre-wrap과 달리 요소 바깥으로 넘치지 않고 공간도 차지하므로 영역의 크기에 영향을 줌