개체 내용이 개체 속에서 자동적으로 줄바꿈할 것인가를 반환하거나 설정한다.

인수
cssSelector : (스타일 선택자)
속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)
스타일 속성은 내용이 모체 용기 범위을 벋어나면 단어를 잘라 다음 줄에 표시할 것인가를 나타내는 문자열이다.

normal 디폴트이며, 개체의 내용이 너비를 초과하면 텍스트 줄이 자동적으로 줄바꿈한다.
nowrap 개체의 내용이 너비를 초과하더라도 텍스트 줄이 줄바꿈되지 않는다.
pre 줄바꿈과 다른 공백문자들이 그대로 유지된다. IE6 이후에서 doctype 속성에서 !doctype이 표준부합으로 선언된 경우에 지원된다. !doctype 선언이 표준부합이 아닌 경우 값을 반환받을 수 있지만, 이 기능이 적용되지 않고, 디폴트인 normal로 적용된다.

이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 normal이다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속된다.

특기

IE6에서 이 속성은 currentStyle 엘레멘트와 pre 값을 지원한다.

줄바꿈, 공백, 탭등 공백문자들은 HTML 문서에서 디폴트로 통합되어 한개의 공백으로 표현된다. whiteSpace 속성이 normal이나 nowrap인 개체에서 추가적인 공백을 삽입하려면 줄바꿈없는 공백  (nonbreaking space : 글자 entity 참조)을 사용하면 된다. 추가적인 줄바꿈은 br 엘레멘트를 사용한다.

이 속성은 브라우저가 내용을 디스플레이하는데 영향을 주는 것과 같은 방식으로 DOM을 통하여 접속하는 내용에 영항을 준다.

적용
개체scriptCSS IE 버전
참조
pre, wordWrap

이 속성은 CSS1(Cascading Style Sheets, Level 1)에서 정의되었다.


내용이 모체 용기 범위을 벋어나면 단어를 잘라 다음 줄에 표시할 것인가를 나타내는 문자열이다.

내용이 모체 용기 범위을 벋어나면 단어를 잘라 다음 줄에 표시할 것인가를 나타내는 문자열이다.

내용이 모체 용기 범위을 벋어나면 단어를 잘라 다음 줄에 표시할 것인가를 나타내는 문자열이다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<P id="whitespacenormal" class="pClass" style="white-space:normal;width:400">내용이 모체 용기 범위을 벋어나면 단어를 잘라
 다음 줄에 표시할 것인가를 나타내는 문자열이다.</P>
<SCRIPT>document.write('whitespacenormal.style.whiteSpace='+whitespacenormal.style.whiteSpace)</SCRIPT>
<P id="whitespacenowrap" class="pClass" style="white-space:nowrap;width:400;">내용이 모체 용기 범위을 벋어나면 단어를 잘라
 다음 줄에 표시할 것인가를 나타내는 문자열이다.</P>
<SCRIPT>document.write('whitespacenowrap.style.whiteSpace='+whitespacenowrap.style.whiteSpace)</SCRIPT>
<P id="whitespacepre" class="pClass" style="white-space:pre;width:400;">내용이 모체 용기 범위을 벋어나면 단어를 잘라
 다음 줄에 표시할 것인가를 나타내는 문자열이다.</P>
<SCRIPT>document.write('whitespacepre.style.whiteSpace='+whitespacepre.style.whiteSpace)</SCRIPT>

내용이 범위을 벋어나면 자동으로 줄바꿈할 것인가를 나타낸다.

pObj.style.whiteSpace=normal

마우스를 개체위에 올려보라. onmouseoveronmouseout 이벤트로 white-space 속성값을 바꾼다.

<P id="pObj" style="width:200;border:solid 1 blue;background:ffa;padding:5"
  onmouseover="this.style.whiteSpace='nowrap';showA.innerHTML=pObj.style.whiteSpace;"
  onmouseout="this.style.whiteSpace='normal';showA.innerHTML=pObj.style.whiteSpace;">
내용이 범위을 벋어나면
자동으로 줄바꿈할 것인가를
 나타낸다.</P>
<DIV>pObj.style.whiteSpace=<SPAN id=showA style=color:blue>normal</SPAN></DIV>
</DIV>

whiteSpace=
원본 문자열은 단어 사이에 각각 세개의 공백을 갖고 네줄에 기록되었다.
oDiv.currentStyle.whiteSpace=normal
<HTML>
<HEAD>
<SCRIPT>
function switchProp(){
  oDiv.style.whiteSpace=event.srcElement.innerText;
  document.all.oSpan.innerText=oDiv.currentStyle.whiteSpace;
}
</SCRIPT>
</HEAD>
<BODY>
<BODY>
whiteSpace=
<BUTTON onclick="switchProp()">normal</BUTTON>
<BUTTON onclick="switchProp()">nowrap</BUTTON>
<BUTTON onclick="switchProp()" style=width:80>pre</BUTTON>
<DIV id="oDiv" style="background:#ffd;padding:10;width:300;white-space:pre">
원본   문자열은
   단어   사이에
   각각   세개의   공백을
   갖고   네줄에   기록되었다.
</DIV>
<DIV>oDiv.currentStyle.whiteSpace=<SPAN id="oSpan" style="color:red">normal</SPAN></DIV>