overflow

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

overflow CSS 속성은 그것의 블록 레벨 컨테이너(block-level container)보다 내용(content)이 너무 클 때(즉, 내용을 감싸고 있는 영역보다 커졌을 때), 내용을 잘라낼 지, 스크롤 바를 보여줄 지, 혹은 범위를 넘어가게 보여줄 지를 기술합니다.

visible(기본값)이 아닌 다른 값으로 overflow 속성을 사용할 경우 새로운 블록 서식 문맥 (block formatting context) 을 생성하게 됩니다. 이 특징은 기술적인 이유로 중요합니다. 만약 스크롤하는 요소와 float이 교차한다면, 각 스크롤 단계마다 내용물을 강제적으로 다시 감싸게 될 것입니다. 이는 결국 스크롤 속도를 느리게 할 것입니다.

overflow 속성이 효력을 갖기 위해선, 반드시 블록 레벨 컨테이너의 높이(height 또는 max-height)가 설정되어 있거나, white-spacenowrap으로 설정되어야 합니다.

Note: Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto.

Note: The JavaScript Element.scrollTop property may be used to scroll an HTML element even when overflow is set to hidden.

구문

 

/* Keyword values */
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

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

 

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

visible
기본 값. 내용(Content)이 잘리지 않으며, 컨텐트 박스(Content box) 영역을 벗어나서 렌더링 될 수도 있습니다.
hidden
필요하다면 컨텐트 박스에 맞게 내용이 잘립니다. 스크롤 바가 제공되진 않습니다.
scroll
필요하다면 컨텐트 박스에 맞게 내용이 잘립니다. 브라우저는 내용이 실제로 잘리는 여부에 따라서 스크롤 바를 제공합니다.(이는 내용이 변할 때, 스크롤 바가 나타나거나 사라지는 문제를 예방합니다.) 출력은 여전히 내용물을 넘쳐나게(overflowing) 나타낼 수도 있습니다.
auto
사용자 환경에 의존합니다. 컨텐트 박스안에 내용의 크기가 적절하다면, visible 처럼 보입니다. 하지만, 여전히 새로운 블록 문맥 요소를 생성하는 특성을 갖습니다. 파이어폭스 같은 데스크탑 브라우저는 내용물이 넘쳐난다면, 스크롤 바를 제공합니다.
overlay   
Behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space. Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browsers.

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.

형식 구문

[ visible | hidden | clip | scroll | auto ]{1,2}

예제

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.

명세

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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
overflowChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes After Firefox 3.6, the overflow property is correctly applied to table group elements (<thead>, <tbody>, <tfoot>).
IE Full support 4
Notes
Full support 4
Notes
Notes From version 4 to 6, Internet Explorer enlarges an element with overflow: visible (default value) to fit the content inside it. height and width behave like min-height and min-width, respectively.
Opera Full support 7Safari Full support 1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android ?
Multiple keyword syntax for overflow-x and overflow-y
Experimental
Chrome Full support 68Edge No support NoFirefox Full support 61IE No support NoOpera Full support 55Safari No support NoWebView Android Full support 68Chrome Android Full support 68Firefox Android Full support 61Opera Android Full support 48Safari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

같이 보기