Thuộc tính overflow trong CSS

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 box
• hidden nội dung vượt qua box sẽ bị ẩn
• scroll hiện thị thanh cuộn để cuộn
• auto 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>