CSS Overflow


CSS Overflow

CSS Overflow dùng để điều khiển content bên trong 1 khu vực ví dụ như div.

CSS Overflow có các giá trị như:

  1. visible (default)
  2. hidden
  3. scroll
  4. auto

Ta xem ví dụ sau:

<style>

 div.myStyle {
  background-color: yellow;
  width: 300px;
  height: 300px;
  overflow:visible;
 }
</style>

<div class="myStyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.










=> Overflow là visible thì nội dung của div bị tràng ra ngoài nếu nội dùng nhiều hơn kích thước của div.

Nếu ta muốn những nội dung ngoài div bị ẩn ta dùng overflow hidden.

<style>

 div.myStyle2 {
  background-color: yellow;
  width: 300px;
  height: 300px;
  overflow:hidden;
 }
</style>

<div class="myStyle2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>


Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

=> Ngoài ra overflow còn có auto và scroll, 2 cái này cũng giống nhau là thêm sroll vào div.


<style>

 div.myStyle3 {
  background-color: yellow;
  width: 300px;
  height: 300px;
  overflow:auto;
 }
</style>

<div class="myStyle3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

=> Ngoài ra ta cũng có thể scroll theo x hoặc y. Ta có overflow-x, overflow-y.

<style>

 div.myStyle4 {
  background-color: yellow;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
 }
</style>

<div class="myStyle4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Như vậy ta đã biết cách dùng overflow rồi nhé. ^_^