공백이 제대로 처리되지 않는다면 문서가 지저분해 보일 수도 있습니다. 이럴 때 whith-space 속성을 사용하면 텍스트와 함께 연속해 입력된 여러 개의 공백을 어떻게 처리할지 지정할 수 있습니다.
white-space
white-space 속성은 스페이스와 탭, 줄바꿈, 자동 줄바꿈을 어떻게 처리할지 정하는 속성입니다.
기본형
white-space : normal | nowrap | pre | pre-wrap | pre-line
- normal, nowrap, pre, pre-wrap, pre-line : 아래 표 참고
| white-space | 스페이스와 탭1 | 줄바꿈2 | 자동 줄바꿈3 |
|---|---|---|---|
| normal | 병합 | 병합 | O |
| nowrap | 병합 | 병합 | X |
| pre | 보존 | 보존 | X |
| pre-wrap | 보존 | 보존 | O |
| pre-line | 병합 | 보존 | O |
- 병합은 여러 개의 공백을 1개의 공백으로 바꾸는 것입니다.
- 보존은 입력된 그대로 출력하는 것입니다.
- O 는 자동으로 줄바꿈하여 영역 내에 내용을 표시하는 것입니다.
- X 는 영역을 벗어나더라도 입력된 대로 출력하는 것입니다.
예제
아래의 문단에 white-space 속성을 각각 적용한 예제입니다.
문단의 시작 부분에 여러개의 공백이 있으며 "elit." 이후 줄바꿈이 한 번
있습니다.
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.