Trong series này:

CSS CSS Selectors Box Model Typography — Font và văn bản Màu sắc và nền Display, Visibility và Overflow Position Flexbox CSS Grid Responsive Design và Media Queries Transitions và Animations CSS Custom Properties (biến CSS) Pseudo-classes và Pseudo-elements
Sửa trang này

Display, Visibility và Overflow

Thuộc tính display

display kiểm soát cách một phần tử chiếm không gian và xếp hàng với các phần tử khác.

Giá trị Ứng xử
block Chiếm cả chiều rộng dòng, bắt đầu dòng mới, tuân đầy đủ box model
inline Rộng vừa nội dung, không bắt đầu dòng mới, width/height không có tác dụng, margin trên-dưới bị bỏ qua
inline-block Cùng dòng như inline, nhưng tuân đầy đủ width/height/margin/padding
none Phần tử bị xoá khỏi luồng — không chiếm không gian
flex Container Flexbox
grid Container Grid 
/* Chuyển <span> thành block */
span.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; }

/* Ẩn phần tử */
.modal { display: none; }
.modal.open { display: flex; }

display: none vs visibility: hidden

  Chiếm không gian? Có thể tương tác?
display: none Không Không
visibility: hidden Có Không 
/* Giữ chỗ nhưng ẩn đi */
.placeholder { visibility: hidden; }

overflow

Kiểm soát nội dung tràn ra ngoài box.

Giá trị Hành vi
visible (mặc định) Nội dung tràn hiện bình thường
hidden Cắt bỏ phần tràn
auto Cuộn khi cần, không cuộn khi không cần
scroll Luôn hiện thanh cuộn
clip Cắt bỏ, không tạo scrolling context 
.card { overflow: hidden; }        /* Cắt ảnh tràn */
.sidebar { overflow-y: auto; }     /* Cuộn dọc khi cần */

Cắt văn bản với ellipsis

.truncate {
  white-space: nowrap;       /* Không xuống dòng */
  overflow: hidden;          /* Ẩn phần tràn */
  text-overflow: ellipsis;   /* Hiện "..." */
  max-width: 200px;
}

z-index cơ bản

z-index kiểm soát thứ tự xếp chồng khi các phần tử overlap. Chỉ có tác dụng với phần tử có position khác static.

.overlay { position: fixed; z-index: 100; }
.modal   { position: fixed; z-index: 200; }
.tooltip { position: absolute; z-index: 300; }

Giá trị z-index lớn hơn → phần tử hiển thị phía trên.

Demo: Block vs inline vs inline-block

    Kết quả 
    <h3>Block elements</h3>
<div class="show-block">div block</div>
<div class="show-block">div block second</div>

<h3>Inline elements</h3>
<span class="show-inline">span 1</span>
<span class="show-inline">span 2 width/height ignored</span>
<span class="show-inline">span 3</span>

<h3>Inline-block elements</h3>
<span class="show-inline-block">inline-block 1</span>
<span class="show-inline-block">inline-block 2</span>
<span class="show-inline-block">inline-block 3</span>

<h3>display: none vs visibility: hidden</h3>
<p>Trước: <span class="show-none">Tôi bị display:none</span> Sau.</p>
<p>Trước: <span class="show-hidden">Tôi bị visibility:hidden</span> Sau.</p>

    body { font-family: sans-serif; padding: 1rem; }
h3 { font-size: 1rem; color: #555; margin: 1rem 0 .4rem; }

.show-block {
  display: block;
  background: #cce5ff; border: 1px solid #4472c4;
  padding: 8px 12px; margin-bottom: 4px;
  width: 200px; /* có tác dụng với block */
}
.show-inline {
  display: inline;
  background: #d4edda; border: 1px solid #28a745;
  padding: 8px 12px;
  width: 200px;  /* KHÔNG có tác dụng với inline */
  height: 60px;  /* KHÔNG có tác dụng với inline */
}
.show-inline-block {
  display: inline-block;
  background: #fff3cd; border: 1px solid #e09a00;
  padding: 8px 12px;
  width: 120px;   /* Có tác dụng */
  height: 50px;   /* Có tác dụng */
  vertical-align: middle;
}
.show-none   { display: none; }
.show-hidden { visibility: hidden; }

    Demo: overflow và text-overflow ellipsis

      Kết quả 
      <h3>overflow: hidden / auto / scroll</h3>
<div class="boxes-row">
  <div>
    <p>overflow: visible</p>
    <div class="ov ov-visible">Nội dung dài quá chiều rộng của box này sẽ tràn ra ngoài.</div>
  </div>
  <div>
    <p>overflow: hidden</p>
    <div class="ov ov-hidden">Nội dung dài quá chiều rộng của box này sẽ bị ẩn đi.</div>
  </div>
  <div>
    <p>overflow: auto</p>
    <div class="ov ov-auto">Nội dung dài quá chiều rộng của box này sẽ có thanh cuộn.</div>
  </div>
</div>

<h3>text-overflow: ellipsis</h3>
<ul class="trunc-list">
  <li class="truncate">Đây là tiêu đề bài viết rất rất rất rất dài không vừa một dòng</li>
  <li class="truncate">Một tiêu đề khác cũng rất dài, sẽ bị cắt bằng dấu ba chấm (...)</li>
  <li class="truncate">Tên file: very-long-filename-that-does-not-fit-in-column.pdf</li>
</ul>

      body { font-family: sans-serif; padding: 1rem; }
h3 { font-size: 1rem; color: #555; margin: 1rem 0 .4rem; }
.boxes-row { display: flex; flex-wrap: wrap; gap: 16px; }
.boxes-row > div { max-width: 160px; }
.boxes-row p { font-size: .8rem; color: #555; margin: 0 0 4px; }

.ov {
  width: 140px; height: 60px;
  background: #f0f4ff; border: 1px solid #b0c4ff;
  padding: 6px; font-size: .85rem;
  border-radius: 4px;
}
.ov-visible { overflow: visible; }
.ov-hidden  { overflow: hidden; }
.ov-auto    { overflow: auto; }

.trunc-list { list-style: none; padding: 0; margin: 0; }
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
  padding: 6px 10px;
  border-bottom: 1px solid #eee;
  font-size: .9rem;
}
.truncate:hover {
  background: #f8f8f8;
}

      Bình luận