White-Space

 

개요 : 이 속성은 요소의 공백문자를 어떻게 다룰지 지정한다.

 

HTML은 연속된 공백문자와 줄바꿈 및 탭을 무시하므로, 소스코드나 ASCII 아트(그림문자)를 표현하기 위한 목적으로 사용한다.

 

정의

 white-space

설명 

 값

normal | pre | nowrap | inherit 

 기본값

 normal

 적용대상

 블럭 레벨 요소

 상속

 됨

 백분율

 사용 불가

 미디어

 visual

 

 값

설명 

 normal

 정상적으로 출력하도록 지정한다. 연속 공백과 줄바꿈을 통합한다.

 pre

 연속 공백와 줄바꿈을 통합하지 않고, 원본 그대로 출력하도록 지정한다.

 nowrap

 연속 공백은 통합하지만 줄바꿈은 통합하지 않도록 지정한다.

 inherit

 부모 요소의 값을 상속하도록 지정한다.

 

-----------------------------------------------------------------------------------------------------------------------------------------

예제

View Source :

<style>
 .ascii-art {white-space: pre;
</style>
<body>
 <div class="ascii-art">
/_ノノノノヽヽ。.*・'.☆
∂^ο^从^ο^从★。*'☆.*
 >< >< ☆・
 </div>
</body>

 

Result :