div 요소에서 콘텐츠의 왼쪽/오른쪽 가장자리 자르기 - 요소의 콘텐츠 영역을 오버플로하는 경우:
div
{
overflow-x:hidden;
}브라우저 지원
모든 주요 브라우저는 Overflow-x 속성을 지원합니다.
참고: Overflow-x 속성은 IE8 및 이전 브라우저에서는 올바르게 작동하지 않습니다.
정의 및 사용법
overflow-x 속성은 요소의 콘텐츠 영역을 오버플로하는 경우 콘텐츠의 왼쪽/오른쪽 가장자리를 자를지 여부를 지정합니다.
overflow-X | Overflow-y
overflow-x와 Overflow-y의 속성은 원래 IE browser에서 독립적으로 개발한 속성이었으며 나중에 CSS3에서 채택하고 표준화했습니다. Overflow-x는 주로 가로 콘텐츠 오버플로의 전단을 정의하는 데 사용되는 반면, Overflow-y는 주로 세로 콘텐츠 오버플로의 전단을 정의하는 데 사용됩니다.
[참고] Overflow-x 및 Overflow-y 값이 다음과 같은 경우 마찬가지로 오버플로와 동일합니다. Overflow-x와 Overflow-y 값이 다르고, 값 중 하나가 명시적으로 표시되도록 설정되거나 설정되지 않은 경우 기본값은 표시되고 다른 값은 표시되지 않는 값입니다. 그러면 보이는 값은 auto
값: visible | auto | no-content
적용 대상: 블록 수준 요소, 테이블 cells Grid
상속: 없음
Attributes요소의 내용은 요소 상자 외부에도 표시됩니다.
[참고 1] IE6-브라우저에서 요소의 포함 블록은 다음과 같습니다. 감싸질 수 있게 확장됨 그 너머의 내용
.box{
height: 200px;
width: 200px;
background-color: lightgreen;
}.in{
width: 300px;
height: 100px;
background-color: lightblue;
}<p class="box">
<p class="in"></p></p>왼쪽 사진은 IE6 브라우저, 오른쪽 사진은 기타 브라우저
 |  |
을 설정하면 해결할 수 있습니다. 왼쪽 그림은 기본 상황이고 오른쪽 그림은 Overflow
 |  |
콘텐츠가 잘리면 브라우저는 나머지 콘텐츠를 볼 수 있도록 스크롤 막대를 표시합니다
[참고] 일반 브라우저의 경우 및