Ngôn ngữ CSS – CSS Overflow

Posted on by mtoplistChuyên mục:Top List

Thuộc tính Overflow

Thuộc tính overflow dùng để quy định cách thức hiển thị khi kích thước nội dung lớn hơn kích thước box chứa nội dung đó.

Cú pháp:

tagName { overflow: giá trị; }

Các giá trị của thuộc tính overflow

Giá trị
Description

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

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
– 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
Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

initial
Khởi tạo giá trị ban đầu cho thuộc tính.

Ví dụ: 

<!DOCTYPE html>  
<html>  
<head>  
<style>  
div.scroll {  
    background-color: #00ffff;  
    width: 100px;  
    height: 100px;  
    overflow: scroll;  
}  
  
div.hidden {  
    background-color: #00FF00;  
    width: 100px;  
    height: 170px;  
    overflow: hidden;  
}  
</style>  
</head>  
<body>  
<p>Thuộc tính tràn xác định phải làm gì nếu nội dung của một phần tử vượt quá kích thước của hộp của phần tử.</p>  
<p>overflow:scroll</p>  
<div class="scroll">Bạn có thể sử dụng thuộc tính tràn khi muốn kiểm soát bố cục tốt hơn. Giá trị mặc định hiển thị.</div>  
<p>overflow:hidden</p>  
<div class="hidden">You can use the overflow property when you want to have better control of the layout.   
The default value is visible.</div>  
</body>  
</html>

Xem ví dụ

mtoplist