Thuộc tính display quyết định một phần tử tham gia bố cục như thế nào: khối, nội dòng, flex, grid hay ẩn hẳn. Bài này cũng phân biệt các cách ẩn phần tử và xử lý nội dung tràn khung.
Bạn sẽ học được
- Phân biệt block, inline, inline-block
- Biết display: flex, grid, none, contents
- So sánh display:none, visibility:hidden, opacity:0
- Xử lý tràn với overflow, text-overflow, scrollbar
Một số khái niệm
| display | Đặc điểm | Phần tử mặc định |
|---|---|---|
| block | Xuống dòng, rộng hết cha, đặt được width/height | div, p, h1, ul, section |
| inline | Nằm trong dòng, không đặt width/height, margin dọc không tác dụng | span, a, strong, em |
| inline-block | Nằm trong dòng nhưng đặt được kích thước | button, img (gần giống) |
| flex / inline-flex | Bố cục một chiều cho con | — |
| grid / inline-grid | Bố cục hai chiều cho con | — |
| none | Ẩn và bỏ khỏi bố cục | — |
| contents | Phần tử “biến mất”, con được đưa lên cấp cha | — |
| Cách ẩn | Chiếm chỗ | Bấm được | Trình đọc màn hình |
|---|---|---|---|
| display: none | Không | Không | Không đọc |
| visibility: hidden | Có | Không | Không đọc |
| opacity: 0 | Có | Có | Vẫn đọc |
| Lớp .sr-only | Không (ẩn thị giác) | Không | Vẫn đọc |
So sánh block, inline, inline-block
<style>
.x { background: #bbdefb; margin: 4px; padding: 6px; width: 150px; height: 40px; }
.b { display: block; } .i { display: inline; } .ib { display: inline-block; }
</style>
<span class="x b">block</span><span class="x b">block</span>
<p>Văn bản <span class="x i">inline (bỏ qua width/height)</span> tiếp tục <span class="x ib">inline-block</span> <span class="x ib">inline-block</span></p>Kết quả hiển thị
Overflow: xử lý nội dung tràn
<style>
.k { width: 210px; height: 70px; border: 2px solid #90a4ae; margin: 6px; display: inline-block; vertical-align: top; font-size: 13px; padding: 4px; }
.o1 { overflow: visible; } .o2 { overflow: hidden; } .o3 { overflow: auto; } .o4 { overflow-y: scroll; overscroll-behavior: contain; }
</style>
<div class="k o2"><b>hidden</b>: phần dư bị cắt bỏ. Tây Bắc có Mộc Châu, Tà Xùa, Mù Cang Chải, Sa Pa, Điện Biên.</div>
<div class="k o3"><b>auto</b>: có thanh cuộn khi cần. Tây Bắc có Mộc Châu, Tà Xùa, Mù Cang Chải, Sa Pa, Điện Biên.</div>
<div class="k o4"><b>scroll</b>: luôn có thanh cuộn dọc.</div>Kết quả hiển thị
/* Cắt nhiều dòng (line clamp) */
.tom-tat { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Ẩn khỏi mắt nhưng vẫn cho trình đọc màn hình */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }Mẹo hay
Khoảng trắng nhỏ giữa các inline-block là do dấu cách/xuống dòng trong HTML; dùng flex với gap để tránh hẳn vấn đề này.
Lưu ý
Đặt overflow: hidden cho cha có thể vô tình cắt mất menu thả xuống, tooltip hoặc bóng đổ của con.
Thực hành
- Làm 3 thẻ inline-block xếp ngang rồi chuyển sang flex, so sánh.
- Tạo nút ẩn/hiện đoạn văn bằng class display:none.
- Cắt mô tả sản phẩm còn 2 dòng bằng line-clamp.
- Thêm nhãn .sr-only cho nút chỉ có biểu tượng.
Tóm tắt bài học
- block, inline, inline-block, flex, grid, none, contents.
- display:none bỏ khỏi bố cục; visibility:hidden giữ chỗ; opacity:0 vẫn bấm được.
- overflow: visible, hidden, auto, scroll; line-clamp cắt nhiều dòng.
- .sr-only cho nội dung chỉ dành cho trình đọc màn hình.