Thuộc tính overflow

Định nghĩa và sử dụng

Thuộc tính overflow xác định điều gì sẽ xảy ra nếu một thành phần box tràn nội dung.

Cấu trúc

tag {
    overflow: giá trị;
}

Với giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
overflow visible overflow: visible; Khi chiều cao của box không đủ chứa text, thì text vẫn hiển thị tràn qua box, đây là mặc định.
hidden overflow: hidden; Khi chiều cao của box không đủ chứa text, thì text bị tràn sẽ được dấu đi.
scroll overflow: scroll; _ Khi chiều cao của box không đủ chứa text, thì text bị tràn sẽ được dấu đi và xuất hiện thanh scroll, khi cuộn sẽ hiển thị text.
_ Khi sử dụng thành phần này sẽ xuất hiện cả thanh scroll ngang và dọc.
auto overflow: auto; _ Khi chiều cao của box không đủ chứa text, thì thanh scroll sẽ tự động hiển thị.
_ Khi sử dụng thành phần này sẽ xuất hiện thanh scroll dọc.
inherit overflow: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

HTML viết:

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN<br />
Html4<br />
Html5<br />
Xhtml<br />
Css2<br />
Css3<br />
Jquery<br />
Javascript<br />
Php</p>
</body>
</html>

Giả sử ban đầu CSS viết:

p {
    border: 1px solid red;
    height: 100px;
}

Hiển thị trình duyệt khi chưa có thuộc tính overflow:

HỌC WEB CHUẨN
Html4
Html5
Xhtml
Css2
Css3
Jquery
Javascript
Php

Thêm thuộc tính overflow vào CSS:

p {
    border: 1px solid red;
    height: 100px;
    overflow: hidden;
}

Hiển thị trình duyệt khi đã thêm overflow vào CSS:

HỌC WEB CHUẨN
Html4
Html5
Xhtml
Css2
Css3
Jquery
Javascript
Php

Trình duyệt hỗ trợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

Thuộc tính overflow được hỗ trợ trong đa số các trình duyệt.

Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype