overflow 속성

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

구문

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

값

기본값: visible.

예제 . visible 값

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

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

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

Результат:

예제 . visible 값

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

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

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

Результат:

예제 . hidden 값

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

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

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

Результат:

예제 . scroll 값

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

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

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

Результат:

예제 . auto 값

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

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

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

Результат:

예제 . auto 값

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

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

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

Результат:

같이 보기