Thuộc tính overflow-x trong CSS
Bùi Tấn Lực - 842
- 11/10/2025
Chức năng của Thuộc tính overflow-x trong CSS
Thuộc tính overflow-x trong CSS dùng để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt chủ yếu theo chiều ngang, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.
Cú pháp của Thuộc tính overflow-x trong CSS
overflow-x: giatri;
giatri: Giá trị để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt chủ yếu theo chiều ngang (Ví dụ: visible, scroll, overlay,....)
Các giá trị của Thuộc tính overflow-x trong CSS
auto: Hiện thanh cuộn chiều dọc nếu nội dung theo chiều dọc bị tràn, hiện thanh cuộn chiều ngang nếu nội dung theo chiều ngang bị tràn.
clip: Ẩn nội dung bị tràn ra ngoài phần tử HTML theo chiều ngang còn chiều dọc khổng ẩn.
hidden: Ẩn nội dung bị tràn ra ngoài phần tử HTML theo chiều ngang còn chiều dọc sẽ hiện thanh cuộn nếu tràn theo chiều dọc.
overlay: Hiện thanh cuộn chiều dọc nếu nội dung theo chiều dọc bị tràn, hiện thanh cuộn chiều ngang nếu nội dung theo chiều ngang bị tràn.
scroll: Hiện thanh cuộn chiều ngang mặc dù chưa có nội dung bị tràn, nếu tràn theo chiều dọc sẽ hiện thanh cuộn ngang.
visible: Không ẩn nội dung bị tràn lẫn chiều ngang và chiều dọc.
Code Thuộc tính overflow-x trong CSS
overflow-x: auto;
overflow-x: clip;
overflow-x: hidden;
overflow-x: overlay;
overflow-x: scroll;
overflow-x: visible;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính overflow-x trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:32%; float:left; height:150px; background:#ddd; margin-right:1%; padding:10px; margin-bottom:15px }
</style>
</head>
<body>
<h1>Code Thuộc tính overflow-x trong CSS</h1>
<p>Dùng để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt chủ yếu theo chiều ngang, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình:</p>
<div style="overflow-x: auto;">
<h4>overflow-x: auto;</h4>
<p>Thuộc tính overflow-x trongvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv CSS dùng để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
<div style="overflow-x: clip;">
<h4>overflow-x: clip;</h4>
<p>Thuộc tính overflow-x trong CSSvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv dùng để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
<div style="overflow-x: hidden;">
<h4>overflow-x: hidden;</h4>
<p>Thuộc tính overflow-x trong CSS dùngffffffffffffffffffffffffffffffffffffffffff để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
<div style="overflow-x: overlay;">
<h4>overflow-x: overlay;</h4>
<p>Thuộc tính overflow-x trong CSSvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv dùng để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
<div style="overflow-x: scroll;">
<h4>overflow-x: scroll;</h4>
<p>Thuộc tính overflow-xwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww trong CSS dùng để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
<div style="overflow-x: visible;">
<h4>overflow-x: visible;</h4>
<p>Thuộc tính overflow-x trong CSS dùng đểfffffffffffffffffffffffffffffffffffffff quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
</body>
</html>
Cách sử dụng overflow-x trong CSS hiệu quả
overflow-x phát huy hiệu quả khi nội dung có chiều rộng lớn hơn phần tử chứa. Thay vì để phần tử làm vỡ bố cục, bạn có thể kiểm soát phần nội dung tràn theo chiều ngang bằng cách tạo vùng cuộn hoặc ẩn phần dư thừa.
Tạo vùng cuộn ngang cho nội dung bị tràn
Khi một khối chứa nội dung có chiều rộng cố định nhưng nội dung bên trong không thể thu nhỏ, overflow-x: auto là lựa chọn phù hợp. Trình duyệt chỉ tạo thanh cuộn ngang khi nội dung thực sự vượt quá chiều rộng của phần tử.
.content {
width: 100%;
overflow-x: auto;
}
Cách này đặc biệt hữu ích với đoạn mã, bảng dữ liệu hoặc các thành phần có kích thước khó co giãn. Người dùng vẫn có thể xem toàn bộ nội dung mà không làm xuất hiện khoảng tràn ngoài vùng bố cục.
Ẩn nội dung tràn theo chiều ngang
Trong trường hợp phần nội dung vượt ra ngoài khung nhưng không cần cho người dùng kéo để xem phần bị khuất, có thể sử dụng overflow-x: hidden. Phần nằm ngoài giới hạn ngang của phần tử sẽ không được hiển thị.
.banner {
overflow-x: hidden;
}
Giá trị này thường phù hợp với các thành phần trang trí, hiệu ứng chuyển động hoặc những phần tử cố tình vượt nhẹ khỏi khung. Tuy nhiên, không nên dùng để che một lỗi bố cục mà người dùng vẫn cần truy cập nội dung bị tràn.
Xử lý bảng có nhiều cột trên màn hình nhỏ
Bảng có nhiều cột thường khó hiển thị đầy đủ trên điện thoại. Thay vì ép các cột co lại khiến dữ liệu khó đọc, có thể đặt bảng trong một vùng chứa cho phép cuộn ngang.
.table-wrap {
width: 100%;
overflow-x: auto;
}
.table-wrap table {
min-width: 700px;
}
Khi màn hình nhỏ hơn chiều rộng tối thiểu của bảng, người dùng có thể kéo ngang để xem các cột còn lại. Nội dung vẫn giữ được kích thước dễ đọc mà không gây ảnh hưởng đến chiều rộng của toàn bộ trang.
Khắc phục lỗi trang web xuất hiện thanh cuộn ngang
Thanh cuộn ngang bất ngờ thường xuất hiện khi một phần tử có chiều rộng lớn hơn vùng hiển thị, chẳng hạn hình ảnh quá rộng, phần tử có width cố định hoặc khoảng cách khiến tổng kích thước vượt khỏi khung.
Trước khi dùng overflow-x: hidden để che thanh cuộn, nên xác định phần tử gây tràn và điều chỉnh kích thước của nó. Chỉ nên kiểm soát phần tràn bằng overflow-x khi đó là hành vi mong muốn của thiết kế.
.container {
max-width: 100%;
overflow-x: auto;
}
Với nội dung cần được đọc đầy đủ, ưu tiên auto để người dùng vẫn có cách tiếp cận phần bị tràn. Ngược lại, hidden chỉ nên sử dụng khi phần nội dung dư thừa thực sự không cần hiển thị.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính overflow-x trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
