overflow

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

overflow 속성은 block 레벨의 부모요소를 자식이 넘쳤을 때 자식요소를 스크롤바를 랜더링해서 자를지 혹은 그냥 보여 줄지를 결정한다.

/* Content is not clipped */
overflow: visible;

/* Content is clipped, with no scrollbars */
overflow: hidden;

/* Content is clipped, with scrollbars */
overflow: scroll;

/* Let the browser decide */
overflow: auto;

/* Global values */
overflow: inherit;
overflow: initial;
overflow: unset;

visible(기본값이다) 을 제외한 다른 값으로 overflow 속성을 사용할 경우 새로운 블록 서식 문맥 (block formatting context) 을 생성하게 된다. 이것은 기술적으로 필수적인데 — 스크롤 되는 요소에 float이 활성화된 경우 overflow는 강제적으로 컨텐츠를 다시 감싸게(재포장) 될것이다. 재포장은 스크롤할때마다 발생하며 스크롤 속도 저하를 발생시킨다.

overflow 속성이  효과를 가지기 위해서는, 블록 레벨 컨테이너의 높이가 설정되어 있거나(height 혹은 max-height) 혹은 white-space 값이 nowrap으로 설정되어 있어야 한다.

Note: When programmatically setting scrollTop on the relevant HTML element, even when overflow has the hidden value an element may still need to scroll.

초기값visible
적용대상non-replaced block-level elements and non-replaced inline-block elements
상속no
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

overflow 속성은 아래 리스트에 나와 있는 값들처럼 하나의 키워드로 정의되어 있다.

Values

visible
기본값. 컨텐츠는 잘리지 않으며, 컨텐츠 박스 영역을 벋어나서 렌더링 될 수도 있다.
hidden
컨텐츠가 잘리며, 스크롤바가 제공되지 않는다.
scroll
컨텐츠가 잘리면, 브라우저에서 잘리고 안 잘리고의 여부를 통해 스크롤 바를 렌더링한다. 이를 통해 동적인 환경에서 스크롤바가 나타나고 사라지는데 있어 생길수 있는 문제점들을 차단한다. 프린터들은 overflow된 컨텐츠도 프린트 할 수 있다.
auto
user agent에 따라 달라집니다. 파이어폭스같은 데스크탑 브라우저는 컨텐츠가 오버플로우되면 스크롤바를 제공합니다.

Mozilla Extensions

-moz-scrollbars-none
Use overflow:hidden instead.
-moz-scrollbars-horizontal
Use of overflow-x and overflow-y is preferred.
-moz-scrollbars-vertical
Use of overflow-x and overflow-y is preferred.
-moz-hidden-unscrollable
Is intended mainly for internal use and by themes. Disables scrolling of XML root elements and <html>, <body> by arrow keys and mouse wheel.

Formal syntax

visible | hidden | scroll | auto

Examples

p {  
     width: 12em;
     height: 6em;
     border: dotted;
     overflow: visible; /* content is not clipped */ 
}

visible (default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: hidden; /* no scrollbars are provided */ }

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: scroll; /* always show scrollbars */ }

overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: auto; /* append scrollbars if necessary */ }

overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Specifications

Specification Status Comment
CSS Overflow Module Level 3
The definition of 'overflow' in that specification.
Working Draft  
CSS Basic Box Model
The definition of 'overflow' in that specification.
Working Draft No change
CSS Level 2 (Revision 1)
The definition of 'overflow' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.0 (1.7 or earlier)[1] 4.0[2] 7.0 1.0 (85)
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) 1.0 (1)[1] ? ? ?

[1] Through Firefox 3.6 (Gecko 1.9.2), the overflow property is incorrectly applied to table-group elements (<thead> , <tbody> , <tfoot>). This behavior is corrected in later versions.

[2] Internet Explorer 4 to 6 enlarges an element with overflow:visible (default value) to fit the content inside it. height/width behaves like min-height/min-width.

See also

문서 태그 및 공헌자

 이 페이지의 공헌자: nugurejeil
 최종 변경: nugurejeil,