Thuộc tính Overflow trong CSS

“Hãy hòa nhã với những kẻ dở hơi. Ai biết được ngày sau bạn có thể phải làm việc cho một kẻ như vậy.”

Bill Gates

Microsoft
Thuộc tính Overflow trong CSS
Thuộc tính Overflow trong CSS

Thuộc tính oveflow trong CSS được sử dụng chỉ định cho trình duyệt cách hành xử ra khi nội dung của phần tử tràn (không vừa) hộp của phần tử.

Xem lại: Box Model nếu đã quên hộp phần tử là gì bạn nhé.

Xử lý nội dung bị tràn với thuộc tính Overflow trong CSS

Trong khi lập trình web, sẽ xảy ra tình huống nội dung của một phần tử lớn hơn kích thước của hộp phần tử.

Ví dụ, các thuộc tính width và height đã cho quá nhỏ, không đủ chỗ để chứa nội dung của phần tử.

Thuộc tính overflow trong CSS cho phép bạn chỉ định cắt nội dung, hiển thị thanh cuộn hoặc hiển thị nội dung tràn của phần tử đó.

Thuộc tính overflow này có thể nhận một trong các giá trị sau:

  • visible: Giá trị mặc định. Nội dung không bị cắt xén, nó sẽ được hiển thị bên ngoài hộp của phần tử và do đó có thể chồng lên nội dung khác.
  • hidden: Nội dung tràn khỏi hộp của phần tử sẽ bị cắt bớt và phần còn lại của nội dung sẽ ẩn.
  • scroll: Nội dung tràn được cắt bớt, giống như ẩn, nhưng cung cấp cơ chế cuộn để cuộn thấy nội dung bị tràn.
  • auto: Nếu nội dung tràn khỏi hộp của phần tử, nó sẽ tự động cung cấp các thanh cuộn để xem phần còn lại của nội dung, nếu không thì thanh cuộn sẽ không xuất hiện.

Trong phiên bản CSS3, chúng ta còn có thêm các thuộc overflow-xoverflow-y cho phép kiểm soát việc xử lý thuộc tính tràn theo từng hướng, trục x hoặc trục y.

Ví dụ sử dụng thuộc tính overflow trong CSS

Để hiểu rõ thuộc tính overflow trong CSS, chúng ta cùng làm ví dụ sau:

HTML:

<div>Đây là một đoạn văn bản được sử dụng để mô tả thuộc tính overflow trong CSS. Cụ thể là thuộc tính overflow lúc này có giá trị là scroll, nó sẽ hiển thị một thanh cuộn ở bên phải để cuộn nội dung trong đó</div>

CSS:

div {
    width: 150px;
    height: 150px;
    border: 1px solid #ccc;
    overflow: scroll;
}

Thử chạy chương trình trên xem kết quả như thế nào nhé.

Để ẩn nội dung bị tràn, chúng ta sử dụng giá trị hidden (Vẫn sử dụng cho thẻ div bên trên):

CSS:

div {
    width: 150px;
    height: 150px;
    border: 1px solid #ccc;
    overflow: hidden;
}

Giờ chạy trên trình duyệt bạn thấy kết quả như thế nào?

Vậy là qua bài này mình đã giúp bạn tìm hiểu rõ hơn về thuộc tính overflow trong CSS để xử lý nội dung bị tràn.

Nhớ luyện tập thêm để ghi nhớ và hiểu rõ cách chúng hoạt động hơn nhé.

Học tiếp: Các đơn vị trong CSS

Đọc thêm: Thuộc tính cursor trong CSS

Có thể bạn muốn xem

Pesudo Element trong CSS

Sử dụng phần tử giả (Pesudo element) trong CSS là một cách để áp dụng các quy tắc CSS cho phần tử không xác định vị trí trong DOM tree.

Pesudo class trong CSS

Bộ chọn lớp giả CSS (Pesudo class Selector) khớp với các thành phần dựa trên một điều kiện bổ sung và không nhất thiết phải được định nghĩa trong DOM tree.

Leave a reply

Please enter your comment!
Please enter your name here