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