Thuộc tính overflow
Như các phần trước, mọi phần tử trong trang đều là các box. Nếu thuộc tính height
của box không được thiết lập,
thì chiều cao của box tự động điều chỉnh theo nội dung phần tử.
Ví dụ:
<style> .examp1 { background-color: LightBlue; float: left; width: 200px; } </style> <div class="examp1"> This text is inside the div element, which has a blue background color and is floated to the left. We set a specific height and width for the div element, and as you can see, the content cannot fit. </div>
Tuy nhiên, khi chiều rộng và cao của box cố định, nếu nội dung trong box vượt quá kích thước box thì nội dung này hiện thị thế nào được điều khiển bởi thuộc tính overflow
Ví dụ sau khi nôi dung vượt quá kích thước box và không dùng thuộc tính overflow
<style> .examp2 { background-color: LightBlue; float: left; width: 200px; height: 130px; } </style> <div class="examp2"> This text is inside the div element, which has a blue background color and is floated to the left. We set a specific height and width for the div element, and as you can see, the content cannot fit. </div>
overflow nhận các giá trị
visible
đây là mặc định, vẫn hiện thị text (bị tràn ra) khi vượt qua kích thước boxhidden
nội dung vượt qua box sẽ bị ẩnscroll
hiện thị thanh cuộn để cuộnauto
tự động nếu cần thiết sẽ hiện thị thanh cuộn
Ví dụ sử dụng thanh cuộn:
<style> .examp3 { background-color: LightBlue; float: left; width: 200px; height: 130px; overflow: scroll; } </style> <div class="examp3"> This text is inside the div element, which has a blue background color and is floated to the left. We set a specific height and width for the div element, and as you can see, the content cannot fit. </div>