Tràn nội dung

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 41 trên 76.

Trong CSS, thuộc tính overflow kiểm soát cách xử lý nội dung tràn khỏi hộp của phần tử. Khi nội dung của một phần tử quá lớn, không thể vừa với chiều rộng và chiều cao đã chỉ định, thuộc tính overflow sẽ quyết định có cắt nội dung, thêm thanh cuộn hay hiển thị phần nội dung tràn bên ngoài ranh giới của phần tử hay không.

Đây là cú pháp cơ bản để sử dụng thuộc tính overflow:

selector {
    overflow: value;
}

value: Hành vi tràn mong muốn, có thể là một trong những lựa chọn sau:

visible: Đây là giá trị mặc định. Nội dung tràn ra ngoài sẽ hiển thị bên ngoài khung của phần tử và có thể chồng lên các phần tử bên cạnh.

hidden: Nội dung tràn ra sẽ bị cắt, phần còn lại không hiển thị.

scroll: Thêm thanh cuộn (cả ngang và dọc) vào phần tử, cho phép người dùng cuộn qua nội dung bị tràn.

auto: Trình duyệt quyết định có thêm thanh cuộn hay không dựa trên nội dung và không gian hiện có. Thông thường, thanh cuộn chỉ xuất hiện khi cần thiết.

Ví dụ:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

Trong ví dụ này, tất cả phần tử <div> có chiều rộng 200px và chiều cao 100px sẽ được thêm thanh cuộn để xem nội dung tràn.

Bạn cũng có thể điều khiển cách xử lý nội dung tràn theo hướng ngang và hướng dọc một cách độc lập bằng các thuộc tính overflow-x và overflow-y:

.example {
    overflow-x: hidden; /* Ẩn phần nội dung tràn theo chiều ngang */
    overflow-y: scroll; /* Thêm thanh cuộn dọc */
}

Thử thách

Dễ

Bạn có một tài liệu HTML với phần tử phân khu (<div>) chứa một đoạn văn (<p>) có nội dung dài. Nhiệm vụ của bạn là dùng thuộc tính overflow để kiểm soát cách hiển thị nội dung tràn. Hãy làm theo các bước dưới đây:

Viết một quy tắc CSS áp dụng cho phần tử <div>. Đặt width thành 300px, height thành 150px và border thành 1px solid black.
Đặt thuộc tính overflow của phần tử <div> thành scroll để thêm thanh cuộn vào phần tử.

Tự làm thử

<html>
<head>
    <title>Overflow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>
        <p>This is a long text that will likely overflow its container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
</html>