CSS 참조 설명서

CSS @규칙(RULES)

CSS 속성 전체

CSS3 overflow-속성 사용 방법 및 예제

overflow-CSS 속성이 요소 내용 영역의 좌우 경계에서 내용이 범위를 벗어나면, 내용을 잘라내는지, 스크롤을 추가하는지, 혹은 넘친 내용을 표시하는지 정의합니다.

아래 표는 이 속성의 사용 설명과 버전 기록, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 설명합니다.

기본 값:	visible
적용 대상:	Block, inline-block and flex 컨테이너
thừa kế:	없음
애니메이션 가능:	아니요.참조: 애니메이션 속성。
버전:	CSS3의 새 기능
JavaScript 문법:	object.style.overflowX="scroll"

overflow x의 사용 문법

이 속성의 문법은 다음과 같습니다:

overflow-x: visible | hidden | scroll | auto | initial | inherit

다음 예제는 overflow를 사용하는 방법을 설명합니다.-x 속성.

예제

　　div {
　　　width:　400px;
　　　height:　300px;
　　　overflow-x: scroll;
　　}

테스트 보기‹/›

속성 값

아래 표는 이 속성의 값을 설명합니다。

값	설명
visible	콘텐츠는 잘려지지 않으며, 요소 프레임 외부에 렌더링되어 다른 콘텐츠와 겹칠 수 있습니다. 기본 값입니다.
hidden	overflow된 요소 프레임의 내용은 잘려지고, 나머지 내용은 보이지 않습니다.
scroll	overflow된 콘텐츠는 숨겨져 있지만, overflow된 콘텐츠에 접근할 수 있는 스크롤 메커니즘을 제공합니다.
auto	콘텐츠가 요소의 프레임을 벗어나면, 추가 내용을 볼 수 있는 스크롤바를 제공합니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 overflow를 사용합니다.-x의 속성 값.

브라우저 호환성

overflow-x 속성 브라우저의 호환성, 아래 표는 해당 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다。

	Firefox 1.5위 Google Chrome1+ Internet Explorer 9+ Apple Safari 3+ Opera 9.5+

경고: Internet Explorer 7와 이전 버전은 overflow 속성을 지원하지 않습니다-x 속성을 사용해야 합니다。IE8이 속성을 지원하지만 Microsoft 특정
-ms-접두리(예를 들어-ms-overflow-x) IE에서9및 이후 버전에서 지원됩니다。

추가로 읽어보세요

다음 튜토리얼을 참조하십시오:CSS Overflow。

관련 속성:overflow，overflow-y，clip，word-wrap。

CSS3 overflow-y 속성 CSS 오버플로우 속성