- CSS overflow Property
- CSS overflow 속성
1 값 목록[ | ]
visible | 넘치는 부분 그대로 나옴(기본값) |
hidden | 넘치는 부분 잘려서 안나옴 |
scroll | 가로세로 스크롤 나옴 |
auto | 필요한 스크롤만 나옴 |
2 예시 1: div[ | ]
html
Copy
<style>
div {
width: 120px; height: 80px; margin: 5px;
background-color: skyblue; float: left;
}
div:nth-of-type(1) { overflow: visible; background: lightgreen; }
div:nth-of-type(2) { overflow: hidden; }
div:nth-of-type(3) { overflow: scroll; }
div:nth-of-type(4) { overflow: auto; }
</style>
<div>(visible, 기본값)
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</div>
<div>(hidden)
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</div>
<div>(scroll)
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</div>
<div>(auto)
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</div>
3 예시 2: textarea[ | ]
html
Copy
<style>
textarea {
width: 120px; height: 80px; margin: 5px;
background-color: skyblue; float: left;
}
textarea:nth-of-type(1) { overflow: visible; background: lightgreen; }
textarea:nth-of-type(2) { overflow: hidden; }
textarea:nth-of-type(3) { overflow: scroll; }
textarea:nth-of-type(4) { overflow: auto; }
</style>
<textarea>(visible, 기본값)
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</textarea>
<textarea>(hidden)
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</textarea>
<textarea>(scroll)
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</textarea>
<textarea>(auto)
우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라.
</textarea>
4 같이 보기[ | ]
- CSS overflow-x, overflow-y 속성
- CSS word-break 속성
- CSS word-wrap 속성
- CSS white-space 속성
- CSS text-overflow 속성
- HTML div 태그
- HTML textarea 태그
- HTML textarea 자동 높이 조절
- HTML div에 스크롤바 붙이기
- HTML 테이블 스크롤 적용
- CSS float 자식들 포함하기