Bùi Tấn Lực - 27
- 11/10/2025
Bùi Tấn Lực 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, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính overflow-x trong CSS
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á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
<!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>
<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>
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 *
