줄바꿈, 공백 처리 방법 - white-space

공백이 제대로 처리되지 않는다면 문서가 지저분해 보일 수도 있습니다. 이럴 때
whith-space 속성을 사용하면 텍스트와 함께 연속해 입력된 여러 개의 공백을
어떻게 처리할지 지정할 수 있습니다.

white-space

white-space 속성은 스페이스와 탭, 줄바꿈, 자동 줄바꿈을 어떻게 처리할지 정하는
속성입니다.

기본형

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

normal, nowrap, pre, pre-wrap, pre-line :
아래 표 참고

style="border-collapse: collapse; box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 15px -8px; padding: 24px; text-align: center; width: 100%;"
>

white-space

스페이스와 탭¹

줄바꿈²

자동 줄바꿈³

class="firsttd"
data-heading="white-space"
style="padding: 8px 16px;"
>
normal

병합
병합
O

class="firsttd"
data-heading="white-space"
style="padding: 8px 16px;"
>
nowrap

병합
병합
X

class="firsttd"
data-heading="white-space"
style="padding: 8px 16px;"
>
pre

보존
보존
X

class="firsttd"
data-heading="white-space"
style="padding: 8px 16px;"
>
pre-wrap

보존
보존
O

class="firsttd"
data-heading="white-space"
style="padding: 8px 16px;"
>
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>

class="codepen"
data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="925"
data-pen-title="CSS 공백 처리 방법 white-space 예제"
data-slug-hash="qBNNEZB"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 925px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.