KoXo 자바스크립트 - 스타일(style) - whiteSpace | white-space (acronym, address, baseFont, ...)

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

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

<!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

마우스를 개체위에 올려보라. onmouseover와 onmouseout 이벤트로 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>

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