요소 내의 콘텐츠의 크기가 정해진 요소 영역을 벗어나는 경우에 가로, 세로 방향으로 벗어나는 콘텐츠를 속기 방식으로 설정한다.
overflow
속성 값이 visible
과 clip
의 경우 overflow-x
또는 overflow-y
속성 값중 하나가 표시되지 않거나 클리핑(clipping)되지 않았다면 각각 auto
와 hidden
값으로 계산된다.
overflow
속성은 일반적으로 컨테이너 요소에게 적용하지만 만약에 body
요소에게 적용시 높이가 고정되어 있다 하더라도 hidden
값이 적용되지 않는다. body
는 특별한 요소로서 뷰포트와 관계가 매우 깊다. body
에게 설정된 overflow
속성의 값은 뷰포트에 적용되도록 이동이 된다. 콘텐츠가 뷰포트 영역에 모두 표시된다면 overflow
값은 의미가 없다고 볼 수 있다. 그럼에도 body
에게 높이를 지정하고 overflow
속성이 적용되기를 원한다면 루트(html
) 요소에게 overflow
속성을 기본 값이 아닌 값으로 지정하면 된다.
overflow
속성에 사용되는 타입이다.
[ <overflow> ]{1,2}
overflow-x
와 overflow-y
속성의 값을 순서대로 설정한다. 두 번째 값을 생략하면 첫 번째 값을 사용한다.
요소 내의 콘텐츠중 첫 번째 p
요소에게 가로 크기를 명시했다. 따라서 overflow
속성 값이 scroll hidden
이므로 overflow-x
속성은 스크롤을 표시하고 overflow-y
는 벗어나는 콘텐츠를 숨긴다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
overflow-x
, overflow-y
, overflow
속성에 사용되는 값을 나타낸다.
visible | hidden | clip | scroll | auto
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
overflow: auto;