HTML5/CSS3 - overflow

 

박스의 크기를 정했을때. 
그안에 글자를 넣기에 글씨가 엄청 많을때. 

이걸 어쩌나?
이때 쓰는게 
overflow 속성

visible : 박스를 넘어가도 글씨를 그냥 보여줌
hidden : 박스안부분만 보이고 나머진 안보여줌
scroll : 스크롤이 생김
auto : 글씨가 많을땐 스크롤이 생기고, 없을땐 안생김.

 

<div class="box_1">
 
<h3>visible</h3>
<p>Lorem ipsum dolor sit aamet sit veroeros sed 
et blandit consequat sed veroeros lorem et blandit adipiscing feugiat 
phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat 
sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad 
litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet.</p>
 
</div>
 
 
 
<div class="box_2">
 
<h3>hidden</h3>
<p>Lorem ipsum dolor sit aamet sit veroeros sed 
et blandit consequat sed veroeros lorem et blandit adipiscing feugiat 
phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat 
sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad 
litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet.</p>
 
 
 
<div class="box_3">
 
<h3>scroll</h3>
<p>Lorem ipsum dolor sit aamet sit veroeros sed 
et blandit consequat sed veroeros lorem et blandit adipiscing feugiat 
phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat 
sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad 
litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet.</p>
    
</div>
 
 
 
<div class="box_4">
 
<h3>auto</h3>
<p>Lorem ipsum dolor sit aamet sit veroeros sed 
et blandit consequat sed veroeros lorem et blandit adipiscing feugiat 
phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat 
sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad 
litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet.</p>
 
</div>

div{
 
width:140px;
height:150px;
background-color:#ccc;
float:left;
margin-right:10px;
 
}
 
.box_1{
overflow:visible;
}
 
.box_2{
overflow:hidden;
}
 
.box_3{
overflow:scroll;
}
 
.box_4{
overflow:auto;
}