CSS를 사용하여 오버플로 콘텐츠 처리

<시간/>

CSS overflow 속성을 사용하여 요소의 오버플로 콘텐츠를 관리/처리할 수 있습니다. 이 속성을 사용하면 사용자가 콘텐츠를 자르고, 스크롤 막대를 제공하여 잘린 콘텐츠를 보고, 컨테이너 외부에서 콘텐츠를 렌더링하여 이름이 오버플로되도록 할 수 있습니다.

구문

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

Selector {
   overflow: /*value*/
}

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를 사용하여 오버플로 콘텐츠 처리

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/sas/images/sas-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를 사용하여 오버플로 콘텐츠 처리