white-space으로 공백 처리하는 방법 알아보기

1. white-space?

white-space은 띄어쓰기, 탭, 줄바꿈 등 공백을 처리하는 방법에 대한 속성이다. 속성 값으로는 normal / nowrap / pre /  pre-wrap / pre-line 있다. 

 

2. white-space 속성

 

	스페이스(띄어쓰기), 탭(들여쓰기)	자동 줄바꿈	입력시 줄바꿈
normal	띄어쓰기 1칸으로 표시됨	○	×
nowrap	띄어쓰기 1칸으로 표시됨	×	×
pre	스페이스, 탭 그대로 적용됨	×	○
pre-wrap	스페이스, 탭 그대로 적용됨	○	○
pre-line	띄어쓰기 1칸으로 표시됨	○	○

 

[white-space: normal]

기본값으로 연속된 공백(스페이스와 탭)의 경우 하나의 공백으로 처리되며 자동 줄바꿈 되어 영역 내에서 내용이 표시된다. 

 

[white-space: nowrap]

white-space: normal와 비슷한 속성을 가져 연속된 공백의 경우 하나의 공백으로 처리된다. 하지만 자동 줄바꿈이 되지 않아 영역을 벗어나 텍스트 1줄로 표시되는 차이점을 가진다.

 

[white-space: pre]

스페이스, 탭 등의 연속된 공백이 그대로 처리되며 자동 줄바꿈 되지 않아 영역을 벗어나 텍스트 1줄로 표시된다. 단, 입력 시에 줄바꿈한 것은 적용된다.

 

[white-space: pre-wrap]

스페이스, 탭 등의 연속된 공백이 그대도 처리되며 자동 줄바꿈과 입력 시 줄바꿈이 모두 적용된다

 

[white-space: pre-line]

연속된 공백의 경우 하나의 공백으로 처리되나 자동 줄바꿈과 입력 시 줄바꿈이 모두 적용된다.

 

3. 적용 예시 

[HTML]

<div class="wrap">
  <p>white-space: normal</p>
  <div class="box1">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
    Aliquid inventore dignissimos vitae cumque tenetur, asperiores, 
    odit quam deleniti, dolorum sunt nemo in ipsam numquam, ullam commodi 
    veniam hic sint illo.
  </div>

  <p>white-space: nowrap</p>
  <div class="box2">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
    Aliquid inventore dignissimos vitae cumque tenetur, asperiores, 
  </div>

  <p>white-space: pre</p>
  <div class="box3">
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid inventore dignissimos vitae cumque tenetur, asperiores, 
  odit quam deleniti, dolorum sunt nemo in ipsam numquam,         ullam commodi veniam hic sint illo.
  </div>

  <p>white-space: pre-wrap</p>
  <div class="box4">
    Lorem ipsum dolor sit amet consectetur,           adipisicing elit. 
    Aliquid inventore dignissimos vitae cumque tenetur, asperiores, 
    odit quam deleniti, dolorum sunt nemo in ipsam numquam, ullam commodi 
    veniam hic sint illo.
  </div>

  <p>white-space: pre-line</p>
  <div class="box5">
    Lorem ipsum dolor sit       amet consectetur, adipisicing elit. 

    Aliquid inventore dignissimos vitae cumque tenetur, asperiores, odit quam deleniti, dolorum sunt nemo in ipsam numquam, ullam commodi veniam hic sint illo.
  </div>
</div>

 

[CSS]

<style type="text/css">
/*reset*/
* {margin: 0; padding: 0; box-sizing: border-box;}
li {list-style: none;}

.wrap{padding: 50px}
.wrap div{width: 600px; margin-bottom: 15px; padding: 10px; font-size: 13px; border: 1px solid #000;}
p{font-size: 15px; font-weight: bold; margin-bottom: 5px;}

.wrap div.box1{white-space: normal;}
.wrap div.box2{white-space: nowrap;}
.wrap div.box3{white-space: pre;}
.wrap div.box4{white-space: pre-wrap;}
.wrap div.box5{white-space: pre-line;}
</style>

 

[결과 화면]

white-space 적용화면