개체의 내용이 개체의 너비나 높이를 초과하면 어떻게 처리할 것인가를 반환하거나 설정한다.

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

: (속성 문자열)
스타일 속성은 개체의 왼쪽 테두리(border)와 내용 사이의 공간 거리를 나타내는 문자열이다.

visible 디폴트이며, 내용이 잘리지 않고, 스크롤바가 생기지 않는다.
scroll 내용이 잘리고, 개체의 크기가 내용의 크기를 초과하지 않더라도, 스크롤바가 생긴다,
hidden 개체의 크기가 내용의 크기를 초과하면 감춰진고 보이지 않는다.
auto 필요한 경우에만 자동적으로 내용이 잘리고, 스크롤바가 생긴다,

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

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

IE6에서 !DOCTYPE 속성에 규격에 부합하는 설정을 하면, 이 속성은 html 개체에 적용된다.

전형적인 전체 문서 body 엘레멘트의 디폴트값은 auto이다.

textArea 게체에 overflow 속성을 hidden으로 설정하면 스크롤바가 감춰진다.

overflow 속성을 visible로 설정하면, 그 개체를 포함하는 window이나 frame의 크기에 맞춰 내용이 잘린다.

적용
개체scriptCSS IE 버전
참조
overflow overflowX overflowY position

이 속성은 CSS2(Cascading Style Sheets Level 2)에 정의되었다.


개체의 내용이 개체의 너비나 높이를 초과하면 어떻게 처리할 것인가를 반환하거나 설정한다.
개체의 내용이 개체의 너비나 높이를 초과하면 어떻게 처리할 것인가를 반환하거나 설정한다.

divObj.style.overflow=결과 표시창

overflow 속성을 선택해 보라.

<SCRIPT>
function showAll(selText){
  divObj.style.overflow=showA.innerHTML=selText;
}
</SCRIPT>
<DIV id=divObj style="width:200px;height:100px;overflow:auto;border:solid 1 blue" style="color:blue">
개체의 내용이 개체의 너비나 높이를 초과하면 어떻게 처리할 것인가를 반환하거나 설정한다.<BR>
개체의 내용이 개체의 너비나 높이를 초과하면 어떻게 처리할 것인가를 반환하거나 설정한다.
</DIV>
<BR>
<SELECT onchange="showAll(this.options[this.selectedIndex].text)">
<OPTION>visible
<OPTION>scroll
<OPTION>hidden
<OPTION selected>auto
</SELECT>
<DIV style="white-space:nowrap">divObj.style.overflow=<SPAN id=showA style="color:blue">결과 표시창</SPAN></DIV>