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ử. Để tìm hiểu về thuộc tính overflow, mời bạn đọc cùng eLib tham khảo bài viết đưới đây.
Mục lục nội dung
1. Xử lý nội dung bị tràn với thuộc tính Overflow
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-x và overflow-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.
2. 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?
Trên đây là bài viết của eLib.VN về thuộc tính overflow trong CSS. Chúng tôi hy vọng, qua bài viết này, sẽ phần nào đó giúp bạn đọc tìm hiểu rõ hơn về thuộc tính overflow trong CSS để xử lý nội dung bị tràn. Chúc các bạn thành công!
Tham khảo thêm
- doc CSS Background
- doc CSS Border
- doc CSS display
- doc Thuộc tính float trong CSS
- doc Thuộc tính Font trong CSS
- doc Thuộc tính Margin trong CSS
- doc Thuộc tính opacity trong CSS
- doc Thuộc tính Padding trong CSS
- doc Thuộc tính Position trong CSS
- doc Thuộc tính Align trong CSS
- doc Thuộc tính white-space trong CSS
- doc Thuộc tính tùy chỉnh kích thước trong CSS
- doc Thuộc tính word-wrap trong CSS
- doc Thuộc tính outline trong CSS
- doc Thuộc tính visibility trong CSS
- doc Thuộc tính Counter trong CSS
- doc Block và Inline trong CSS
- doc Thuộc tính cursor trong CSS
- doc Tạo kiểu, viết CSS cho List
- doc Tạo kiểu, viết CSS cho Link
- doc Thuộc tính z-index trong CSS
- doc Pesudo Element trong CSS
- doc Pesudo class trong CSS