CSS 오버플로 속성 작업

<시간/>

CSS 오버플로 속성은 사용자가 콘텐츠의 크기를 조정하지 않고 더 작은 컨테이너에 더 큰 콘텐츠를 표시하려는 경우에 유용합니다. 이 속성을 사용하면 사용자가 콘텐츠를 자르고, 스크롤 막대를 제공하여 잘린 콘텐츠를 보고, 컨테이너 외부에서 콘텐츠를 렌더링하여 이름이 오버플로되도록 할 수 있습니다.

구문

다음은 CSS 오버플로 속성에 대한 구문입니다 -

Selector {
   overflow: /*value*/
}

다음은 CSS 오버플로 속성의 값입니다 -

Sr.No	값 및 설명
1	보이는 기본값이며 내용이 잘리지 않고 요소의 상자 외부에서 렌더링되므로 속성 이름이 오버플로됩니다.
2	숨김 요소의 상자를 오버플로하는 콘텐츠를 클리핑합니다. 클리핑된 콘텐츠는 표시되지 않습니다.
3	스크롤 요소의 상자를 오버플로하는 콘텐츠를 클리핑하고 스크롤바가 콘텐츠와 함께 렌더링되므로 잘린 콘텐츠가 표시됩니다.
4	자동 오버플로된 콘텐츠를 보기 위해 자동으로 스크롤바를 렌더링합니다.

CSS 오버플로 속성의 예를 살펴보겠습니다 -

예시

<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
#containerDiv {
   margin: 0 auto;
   height: 100px;
   width: 100px;
   overflow: auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Overflow</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg">
</div>
<input type="button" onclick="fitHeight()" value="Remove Scrollbars">
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var imgSelect = document.getElementById("image");
var containerDiv = document.getElementById("containerDiv");
function fitHeight() {
   containerDiv.style.height = imgSelect.height+'px';
   containerDiv.style.width = imgSelect.width+'px';
   containerDiv.style.overflow = 'hidden';
}
</script>
</body>
</html>

출력

버튼을 클릭하기 전에 -

CSS 오버플로 속성 작업

'스크롤바 제거'를 클릭한 후 버튼 -

CSS 오버플로 속성 작업

CSS 오버플로 속성에 대한 또 다른 예를 살펴보겠습니다. -

예시

<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
#containerDiv {
   margin: 0 auto;
   height: 110px;
   overflow: scroll;
}
</style></head>
<body>
<form>
<fieldset>
<legend>CSS Overflow</legend>
<div id="containerDiv">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.</div>
<input type="button" onclick="add()" value="Remove Scrollbars">
</fieldset>
</form>
<script>
function add() {
   document.querySelector('#containerDiv').style.overflow = "hidden";
}
</script>
</body>
</html>

출력

'스크롤바 제거'를 클릭하기 전에 버튼 -

CSS 오버플로 속성 작업

'스크롤바 제거' 버튼을 클릭한 후 -

CSS 오버플로 속성 작업