CSS overflow 속성

CSS overflow Property

CSS overflow 속성

1 값 목록

• visible: 넘치는 부분 그대로 나옴(기본값)
• hidden: 넘치는 부분 잘려서 안나옴
• scroll: 가로세로 스크롤 나옴
• auto: 필요한 스크롤만 나옴

2 예시 1: div

<style>
div {
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: silver;
  float: left;
}
.box1 { }
.box2 { overflow: visible; }
.box3 { overflow: hidden; }
.box4 { overflow: scroll; }
.box5 { overflow: auto; }
</style>


<div class='box1'>(기본값 → visible)<br>
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</div>
<div class='box2'>(visible)<br>
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</div>
<div class='box3'>(hidden)<br>
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</div>
<div class='box4'>(scroll)<br>
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</div>
<div class='box5'>(auto)<br>
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</div>

→ 예제: http://zetawiki.com/ex/css/overflow-div.php

3 예시 2: textarea

<style>
textarea {
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: silver;
  float: left;
}
.box1 { }
.box2 { overflow: visible; }
.box3 { overflow: hidden; }
.box4 { overflow: scroll; }
.box5 { overflow: auto; }
</style>


<textarea class='box1'>(기본값 → auto)
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</textarea>
<textarea class='box2'>(visible → auto)
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</textarea>
<textarea class='box3'>(hidden)
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</textarea>
<textarea class='box4'>(scroll)
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</textarea>
<textarea class='box5'>(auto)
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</textarea>

→ 예제: http://zetawiki.com/ex/css/overflow-textarea.php

4 같이 보기

• CSS overflow-x, overflow-y 속성
• CSS word-break 속성
• CSS word-wrap 속성
• HTML div 태그
• HTML textarea 태그
• HTML textarea 자동 높이 조절
• HTML div에 스크롤바 붙이기
• HTML_테이블_스크롤_적용

5 참고 자료

• http://www.w3schools.com/cssref/pr_pos_overflow.asp