Ví Dụ Về Thuộc Tính Overflow - Học Web Chuẩn

Trang chủ » Thẻ Overflow » Ví Dụ Về Thuộc Tính Overflow - Học Web Chuẩn

Có thể bạn quan tâm

Ví dụ về thuộc tính overflow
  • Trang chủ
  • Tham khảo
  • CSS
  • Ví dụ về thuộc tính overflow

Thuộc tính overflow

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.

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.

<html> <head> <style type="text/css"> p { border: 1px solid red; height: 140px; overflow: visible; } </style> </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>

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

overflow: hidden;

Khi chiều cao của box không đủ chứa text, thì text bị tràn sẽ được dấu đi.

<html> <head> <style type="text/css"> p { border: 1px solid red; height: 140px; overflow: hidden; } </style> </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>

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

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.

<html> <head> <style type="text/css"> p { border: 1px solid red; height: 140px; overflow: scroll; } </style> </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>

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

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.

<html> <head> <style type="text/css"> p { border: 1px solid red; height: 140px; overflow: auto; } </style> </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>

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

Ví dụ thuộc tính overflow

  • overflow: visible;
  • overflow: hidden;
  • overflow: scroll;
  • overflow: auto;

Từ khóa » Thẻ Overflow