[css]white-space 사용방법

특정영역의 공간에서 공백처리는 어떻게 하나 할때 white-space를 씁니다. 어떻게 쓰는지는 예제를 통해 알아보겠습니다.

html

<div class="test">
  <h2>white-space:normal</h2>
  <div class="wht nor">
    국채를 모집하거나  예산외에  국가의 부담이 될 계약을 체결하려 할 때에는 정부는 미리 국회의 의결을 얻어야 한다. 훈장등의 영전은 이를 받은 자에게만 효력이 있고, 어떠한 특권도 이에 따르지 아니한다.

선거에 관한 경비는 법률이 정하는 경우를 제외하고는 정당 또는 후보자에게 부담시킬 수 없다. 국회의 회의는 공개한다. 다만, 출석의원 과반수의 찬성이 있거나 의장이 국가의 안전보장을 위하여 필요하다고 인정할 때에는 공개하지 아니할 수 있다.
  </div> 
   <!-- 줄바꿈이 있고, 띄워쓰기는 한번만 적용 -->
    
  <h2>white-space:nowrap</h2>
  <div class="wht nowrap">
    국채를  모집하거나  예산외에  국가의  부담이 될 계약을 체결하려 할 때에는 정부는 미리 국회의 의결을 얻어야 한다. 훈장등의 영전은 이를 받은 자에게만 효력이 있고, 어떠한 특권도 이에 따르지 아니한다.

선거에 관한 경비는 법률이 정하는 경우를 제외하고는 정당 또는 후보자에게 부담시킬 수 없다. 국회의 회의는 공개한다. 다만, 출석의원 과반수의 찬성이 있거나 의장이 국가의 안전보장을 위하여 필요하다고 인정할 때에는 공개하지 아니할 수 있다.
  </div>
  <!-- 줄바꿈이 없고, 띄워쓰기는 한번만 적용 -->
    
  <h2>white-space:pre</h2>  
  <div class="wht pre">
    국채를 모집하거나  예산외에  국가의 부담이 될 계약을 체결하려 할 때에는 정부는 미리 국회의 의결을 얻어야 한다. 훈장등의 영전은 이를 받은 자에게만 효력이 있고, 어떠한 특권도 이에 따르지 아니한다.

선거에 관한 경비는 법률이 정하는 경우를 제외하고는 정당 또는 후보자에게 부담시킬 수 없다. 국회의 회의는 공개한다. 다만, 출석의원 과반수의 찬성이 있거나 의장이 국가의 안전보장을 위하여 필요하다고 인정할 때에는 공개하지 아니할 수 있다.
  </div>
  <!-- 공백을 모두 포함하며, 줄바꿈 없음 -->
    
  <h2>white-space:pre-wrap</h2>
  <div class="wht prewrap">
    국채를  모집하거나  예산외에  국가의  부담이 될 계약을 체결하려 할 때에는 정부는 미리 국회의 의결을 얻어야 한다. 훈장등의 영전은 이를 받은 자에게만 효력이 있고, 어떠한 특권도 이에 따르지 아니한다.

선거에 관한 경비는 법률이 정하는 경우를 제외하고는 정당 또는 후보자에게 부담시킬 수 없다. 국회의 회의는 공개한다. 다만, 출석의원 과반수의 찬성이 있거나 의장이 국가의 안전보장을 위하여 필요하다고 인정할 때에는 공개하지 아니할 수 있다.
  </div>
  <!-- 공백을 모두 포함하며, 줄바꿈 있음 -->
    
  <h2>white-space:pre-line</h2>
  <div class="wht preline">
    국채를  모집하거나  예산외에  국가의  부담이 될 계약을 체결하려 할 때에는 정부는 미리 국회의 의결을 얻어야 한다. 훈장등의 영전은 이를 받은 자에게만 효력이 있고, 어떠한 특권도 이에 따르지 아니한다.

선거에 관한 경비는 법률이 정하는 경우를 제외하고는 정당 또는 후보자에게 부담시킬 수 없다. 국회의 회의는 공개한다. 다만, 출석의원 과반수의 찬성이 있거나 의장이 국가의 안전보장을 위하여 필요하다고 인정할 때에는 공개하지 아니할 수 있다.
  </div>
  <!-- -->
</div>

css

.wht{
  margin-bottom: 40px;
  border: 1px solid #ccc;
}

.nor{
  white-space: normal;
}
.nowrap{
  white-space: nowrap;
}
.pre{
  white-space: pre;
}
.prewrap{
  white-space: pre-wrap;
}
.preline{
  white-space: pre-line;
}

결과 보기