CSS는 overflow라는 속성을 제공합니다. 상자의 내용이 상자 자체보다 큰 경우 브라우저에 수행할 작업을 알려줍니다. 이 속성은 다음 값 중 하나를 사용할 수 있습니다. -
| 값 | 설명 |
|---|---|
| 보임 | 컨텐츠가 포함하는 요소의 경계를 넘도록 허용합니다. |
| 숨김 | 중첩된 요소의 내용은 포함하는 요소의 테두리에서 단순히 잘리고 스크롤바가 표시되지 않습니다. |
| 스크롤 | 포함하는 요소의 크기는 변경되지 않지만 사용자가 콘텐츠를 보기 위해 스크롤할 수 있도록 스크롤 막대가 추가됩니다. |
| 자동 | 목적은 스크롤과 같지만 내용이 넘칠 경우에만 스크롤바가 보입니다. |
예시
다음 코드를 실행하여오버플로를 구현할 수 있습니다. 속성 -
<html>
<head>
</head>
<style>
.scroll{
display:block;
border: 2px solid green;
padding:10px;
margin-top:10px;
width:300px;
height:50px;
overflow:scroll;
}
.auto{
display:block;
border: 2px solid green;
padding:10px;
margin-top:10px;
width:300px;
height:50px;
overflow:auto;
}
</style>
<body>
<p>Example of scroll value:</p>
<div class = "scroll">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class = "auto">
I am going to keep lot of content here just to show you how scrollbars
works if there is an overflow in an element box. This provides your
horizontal as well as vertical scrollbars.
</div>
</body>
</html>