CSS의 overflow: hidden 속성은 요소의 크기를 벗어나 넘쳐나는 콘텐츠를 잘라내어(clipping) 화면에 보이지 않도록 처리합니다. 스크롤바조차 생성되지 않기 때문에, 지정된 영역을 초과한 부분은 완전히 숨겨진 상태로 유지됩니다.
overflow: hidden의 동작 원리
요소에 고정된 width와 height 값이 설정되어 있고, 그 안의 내용이 해당 크기를 초과하면 초과된 부분은 브라우저에 의해 잘려 나타나지 않습니다. 이는 콘텐츠가 삭제되는 것이 아니라 단순히 시각적으로 가려지는 것이라는 점이 특징입니다.
아래 예제 코드를 직접 실행해 보면 overflow: hidden 속성이 실제로 어떻게 작동하는지 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: orange;
width: 250px;
height: 35px;
border: 2px solid blue;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Heading</h1>
<div>Overflow property used here. This is a demo text to show the working of CSS overflow: hidden. This hides the content.</div>
</body>
</html>
실행 결과
위 코드를 실행하면 파란색 테두리를 가진 주황색 배경의 div 박스가 화면에 나타납니다. 박스의 높이가 35px로 제한되어 있기 때문에, 그보다 긴 데모 텍스트의 아래쪽 부분은 잘려서 보이지 않습니다. 이것이 바로 overflow: hidden이 콘텐츠를 숨기는 방식입니다.
overflow: hidden 활용 팁
- 레이아웃 유지: 카드, 배너 등 고정된 크기의 UI 요소에서 내용이 삐져나오는 것을 방지할 때 유용합니다.
- 텍스트 말줄임 처리:
text-overflow: ellipsis와 함께 사용하면 긴 텍스트를 '...' 형태로 깔끔하게 처리할 수 있습니다. - 부동 요소 정리(clearfix): 부모 요소에 적용하면 자식 float 요소로 인한 레이아웃 무너짐을 해결하는 데에도 활용됩니다.