overflow 속성

overflow 속성은 블록의 경계(너비 또는 높이)를 넘치는 콘텐츠(텍스트, 이미지, 다른 블록)를 브라우저가 어떻게 처리할지 지정합니다. 브라우저는 넘치는 부분을 숨기거나, 스크롤 막대를 추가하거나, 아무것도 하지 않을 수 있습니다(있는 그대로 - 경계를 넘어 나오도록 둡니다).

구문

선택자 {
	overflow: hidden | scroll | auto | visible;
}

값

값	설명
`hidden`	블록 경계를 넘치는 콘텐츠를 숨깁니다.
`scroll`	항상 스크롤 막대를 추가합니다. 아무것도 넘치지 않더라도 추가되며(이 경우 비활성 상태임), 필요한 경우에만 추가하는 것이 아닙니다.
`auto`	필요한 경우에 스크롤 막대를 추가합니다: 콘텐츠가 맞지 않으면 나타나고, 모두 맞으면 나타나지 않습니다.
`visible`	블록 경계를 넘치는 콘텐츠를 숨기지 않습니다.

기본값: visible.

예제 . visible 값

이 예제에서 매우 긴 단어는 컨테이너에 맞지 않고 경계를 넘어 나올 것입니다. 잘림은 발생하지 않습니다:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: visible;
	border: 1px solid red;
	width: 200px;
}

예제 . visible 값

이번에는 너비뿐만 아니라 높이도 제한됩니다(텍스트가 블록을 넘어 높이 방향으로도 나올 것입니다):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	height: 40px;
	overflow: visible;
	border: 1px solid red;
	margin-bottom: 20px;
}

예제 . hidden 값

이제 컨테이너 경계를 넘어 나오는 모든 부분은 간단히 잘립니다(높이 방향으로도). 높이에 대한 잘림은 명시적으로 높이가 지정된 경우에만 발생한다는 점에 유의하세요. 그렇지 않은 경우 텍스트는 컨테이너의 높이를 확장합니다 - 따라서 잘림은 발생하지 않습니다:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: hidden;
	width: 200px;
	height: 40px;
	border: 1px solid red;
}

예제 . scroll 값

scroll 값을 사용하면 스크롤 막대가 항상 나타납니다. 아무것도 넘치지 않더라도 나타나며 (이 경우 비활성 상태임), 필요하지 않을 때도 나타납니다. 현재 텍스트는 너비나 높이로 넘치지 않지만, 스크롤 막대는 여전히 있습니다(비활성 상태):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: scroll;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

예제 . auto 값

auto 값을 사용하면 스크롤 막대는 콘텐츠가 컨테이너를 넘치는 경우에만 추가됩니다. 지금은 모든 것이 맞기 때문에 스크롤 막대가 없습니다:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: auto;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

예제 . auto 값

이제 너비를 제한하면 수평 스크롤 막대가 나타납니다:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	height: 100px;
	border: 1px solid red;
}

같이 보기

word-break 속성,
긴 단어의 글자를 새 줄로 바꿉니다
overflow-wrap 속성,
긴 단어의 글자를 새 줄로 바꿉니다
overflow-x 속성,
수평으로 넘치는 부분을 자릅니다
overflow-y 속성,
수직으로 넘치는 부분을 자릅니다