CSS overflow: hidden, scroll, auto, clip và dấu ba chấm

overflow làm gì

Khi nội dung lớn hơn hộp của nó (chiều cao cố định, một từ dài, một bảng rộng), nội dung sẽ tràn. Thuộc tính overflow quyết định điều gì xảy ra với phần dư:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overflow values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
    .box {
      width: 150px; height: 50px; padding: 8px;
      border: 2px solid #2563eb; background: #eff6ff;
      margin-bottom: 60px;
    }
    .visible { overflow: visible; }
    .hidden { overflow: hidden; }
    .scroll { overflow: scroll; }
    .auto { overflow: auto; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box visible"><b>visible</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box hidden"><b>hidden</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box scroll"><b>scroll</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box auto"><b>auto</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
  </div>
</body>
</html>

Trên macOS và điện thoại, thanh cuộn nằm đè lên nội dung và mờ dần đi, nên scroll và auto có thể trông giống nhau cho đến khi bạn cuộn.

Tạo hộp có thanh cuộn

Hộp chỉ tràn khi có thứ gì đó giới hạn kích thước của nó. Một height hoặc max-height, cộng với overflow-y: auto, biến một danh sách dài thành khung cuộn:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrollable list</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      max-height: 160px;
      overflow-y: auto;
      border: 1px solid #d1d5db; border-radius: 8px;
    }
    .panel p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="panel" id="panel">
    <p>Message 1</p><p>Message 2</p><p>Message 3</p><p>Message 4</p>
    <p>Message 5</p><p>Message 6</p><p>Message 7</p><p>Message 8</p>
  </div>
</body>
</html>

Ở đây max-height tốt hơn height: danh sách ngắn vẫn ngắn, chỉ danh sách dài mới cuộn. Một vùng cuộn không có nội dung nào nhận focus được bên trong thì nên có tabindex="0" để người dùng bàn phím cũng cuộn được.

overflow-x và overflow-y

Hai trục có thể đặt riêng. Cách dùng phổ biến là cho một bảng rộng cuộn ngang bên trong phần tử chứa, thay vì làm rộng cả trang:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal scroll</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .table-wrap { overflow-x: auto; border: 1px solid #d1d5db; max-width: 360px; }
    table { border-collapse: collapse; }
    th, td { padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="table-wrap" id="wrap">
    <table>
      <tr><th>Plan</th><th>Monthly</th><th>Yearly</th><th>Users</th><th>Storage</th><th>Support</th></tr>
      <tr><td>Free</td><td>$0</td><td>$0</td><td>1</td><td>1 GB</td><td>Community</td></tr>
      <tr><td>Team</td><td>$12</td><td>$120</td><td>10</td><td>100 GB</td><td>Email</td></tr>
    </table>
  </div>
</body>
</html>

Một quy tắc cần nhớ: nếu một trục là hidden, scroll hoặc auto, giá trị visible ở trục còn lại sẽ thành auto. Vì vậy chỉ riêng overflow-x: hidden cũng có thể tạo ra thanh cuộn dọc ngoài ý muốn. overflow-x: clip thì không gây ra điều đó:

.a { overflow-x: hidden; }  /* overflow-y computes to auto */
.b { overflow-x: clip; }    /* overflow-y stays visible */

Cắt chữ bằng dấu ba chấm

text-overflow: ellipsis thay phần cuối bị cắt của một dòng bằng "…". Nó cần đủ ba điều kiện cùng lúc: chiều rộng có giới hạn, chữ không được xuống dòng, và overflow bị ẩn:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ellipsis</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .one-line {
      width: 240px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid #d1d5db; padding: 6px;
    }
    .three-lines {
      width: 240px; margin-top: 12px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      border: 1px solid #d1d5db; padding: 6px;
    }
  </style>
</head>
<body>
  <div class="one-line" id="one">A very long file name that will not fit in the box.pdf</div>
  <div class="three-lines" id="three">This paragraph is longer than three lines. Only the first three lines are shown and the end of the third one becomes an ellipsis, which suits card previews and search results.</div>
</body>
</html>

Line clamp có tiền tố -webkit- hoạt động trong Chrome, Firefox và Safari. Trình đọc màn hình vẫn đọc toàn bộ chữ, nên những từ bị cắt không mất đi với người dùng chúng.

Tác dụng phụ của overflow

Đặt overflow khác visible hoặc clip thay đổi nhiều thứ hơn là chỉ cắt nội dung:

• Nó bao lấy float và margin của phần tử con. Phần tử tạo một block formatting context mới, nên nó lớn lên để bao các phần tử con float. display: flow-root làm được điều tương tự mà không cắt gì cả.
• Nó làm hỏng position: sticky bên dưới. Một phần tử con sticky dính vào scroll container gần nhất; nếu container đó không cuộn, sẽ chẳng có gì dính cả.
• Nó cắt các phần tử con được định vị tuyệt đối (khi phần tử có overflow cũng là khối chứa của chúng), gồm cả dropdown và tooltip, và nó cũng cắt bóng đổ của phần tử con.

Ẩn thanh cuộn

Bạn có thể giữ hộp cuộn được mà ẩn thanh cuộn bằng scrollbar-width: none. Hãy dùng hạn chế: không có thanh cuộn, nhiều người đọc không nhận ra còn nội dung phía sau. scrollbar-gutter: stable làm điều ngược lại: nó giữ sẵn chỗ cho thanh cuộn để nội dung không bị xê dịch khi thanh cuộn xuất hiện.

Lỗi thường gặp

• Mong nội dung tràn mà không giới hạn kích thước. Hộp không có height hay max-height sẽ lớn lên thay vì tràn.
• Đặt overflow: hidden trên body để "sửa" lỗi cuộn ngang. Hãy tìm phần tử bị quá rộng (thường là width cố định, một URL dài, hoặc 100vw khi có thanh cuộn).
• Dấu ba chấm mà thiếu white-space: nowrap. Chữ xuống dòng, nên không có gì tràn theo chiều ngang và dấu ba chấm không xuất hiện.
• overflow-x: hidden tạo ra thanh cuộn dọc. Hãy dùng clip.
• Dropdown bị thẻ chứa nó cắt mất. overflow: hidden của thẻ đã cắt nó; hãy dời quy tắc overflow hoặc render dropdown ra bên ngoài.