Overflow là gì? Cách Sử Dụng Overflow trong CSS

Khi làm web, bạn có thể gặp tình huống một đoạn văn quá dài làm vỡ khung, hay một khối nội dung tràn ra ngoài và đè lên các phần tử khác. Đó là lúc thuộc tính overflow phát huy tác dụng, giúp bạn quyết định phần nội dung vượt kích thước sẽ bị cắt, hiển thị tràn hay được cuộn bằng thanh cuộn. Cùng LANIT tìm hiểu overflow là gì, cách dùng từng giá trị và những lỗi thường gặp qua các ví dụ dễ hiểu bên dưới.

Overflow là gì?

Trong CSS, overflow là thuộc tính dùng để kiểm soát phần nội dung bị tràn của một phần tử. Khi nội dung vượt ra khỏi chiều rộng hoặc chiều cao của phần tử chứa nó, overflow sẽ quyết định nội dung đó được hiển thị tràn ra ngoài, bị cắt bớt hay được cuộn bằng thanh cuộn.

Thuộc tính này chỉ có tác dụng khi phần tử chứa bị giới hạn kích thước, ví dụ khi bạn đặt width hoặc height cố định. Nếu phần tử tự co giãn theo nội dung thì sẽ không có phần nào bị tràn để overflow xử lý.

Các giá trị của overflow trong CSS và ví dụ minh họa

Thuộc tính overflow có 5 giá trị chính là visible, hidden, clip, scroll và auto. Để dễ so sánh, tất cả ví dụ dưới đây dùng chung một đoạn HTML gồm khung .box cao 100px chứa đoạn văn dài hơn chiều cao của khung. Chỉ có khai báo overflow trong CSS là thay đổi ở mỗi giá trị.

<div class="box">
  Overflow là thuộc tính CSS giúp kiểm soát phần nội dung bị tràn khỏi
  phần tử chứa. Khi nội dung dài hơn kích thước của khung, trình duyệt
  sẽ xử lý phần tràn theo giá trị overflow mà bạn khai báo. Đoạn văn
  này được viết dài để minh họa rõ hiện tượng tràn nội dung.
</div>

Giá trị visible

visible là giá trị mặc định của overflow. Phần nội dung vượt quá kích thước của phần tử chứa sẽ hiển thị tràn ra ngoài khung, không bị cắt và không có thanh cuộn.

.box {
  width: 200px;
  height: 100px;
  border: 2px solid #333;
  overflow: visible;
}

Kết quả: đoạn văn chạy xuyên qua đường viền dưới của khung và có thể đè lên các phần tử nằm phía dưới. Giá trị này phù hợp khi bạn chủ động muốn nội dung tràn ra, chẳng hạn menu dropdown hay tooltip.

Giá trị hidden

Với hidden, phần nội dung vượt quá kích thước của phần tử chứa sẽ bị cắt đi, chỉ hiển thị phần nằm vừa trong khung. Người dùng không có thanh cuộn để xem phần bị ẩn.

.box {
  width: 200px;
  height: 100px;
  border: 2px solid #333;
  overflow: hidden;
}

Kết quả: khung chỉ hiển thị vài dòng đầu của đoạn văn, phần còn lại bị cắt ngay tại đường viền. Phần bị ẩn vẫn tồn tại và vẫn có thể được cuộn bằng JavaScript hoặc khi người dùng dùng phím Tab để focus vào phần tử bên trong. hidden thường dùng cho ảnh bo góc, carousel, hoặc khóa cuộn trang bằng overflow: hidden trên thẻ body khi mở popup.

Giá trị scroll

Với scroll, phần tử luôn hiển thị thanh cuộn, kể cả khi nội dung không bị tràn. Người dùng có thể cuộn để xem hết phần nội dung mà không bị cắt mất.

.box {
  width: 200px;
  height: 100px;
  border: 2px solid #333;
  overflow: scroll;
}

Kết quả: khung xuất hiện cả thanh cuộn dọc và thanh cuộn ngang, trong đó thanh cuộn ngang sẽ không cuộn được nếu nội dung không tràn theo chiều rộng. Vì luôn chiếm chỗ nên scroll phù hợp khi bạn muốn giao diện ổn định, không bị thay đổi kích thước khi nội dung thay đổi. Trên một số hệ điều hành như macOS, thanh cuộn dạng lớp phủ có thể chỉ hiện khi người dùng bắt đầu cuộn.

Giá trị auto

auto là giá trị linh hoạt nhất. Nếu nội dung nằm vừa trong phần tử chứa thì hiển thị bình thường, còn nếu nội dung bị tràn thì thanh cuộn mới xuất hiện, do trình duyệt tự quyết định.

.box {
  width: 200px;
  height: 100px;
  border: 2px solid #333;
  overflow: auto;
}

Kết quả: vì đoạn văn dài hơn khung nên thanh cuộn dọc xuất hiện, còn thanh cuộn ngang không hiện vì không có nội dung tràn ngang. Đây là lựa chọn phổ biến nhất cho khung bình luận, khung chat hay vùng hiển thị code có độ dài thay đổi.

Giá trị clip

clip cũng cắt phần nội dung bị tràn giống hidden, nhưng nghiêm ngặt hơn ở chỗ cấm hoàn toàn mọi kiểu cuộn, kể cả cuộn bằng JavaScript. Ngoài ra, clip không tạo ra ngữ cảnh định dạng mới cho phần tử như hidden, nên ít gây tác dụng phụ lên bố cục.

.box {
width: 200px;
height: 100px;
border: 2px solid #333;
overflow: clip;
}

Kết quả: nhìn bằng mắt thì giống hidden, nhưng phần bị cắt không thể được cuộn ra bằng bất kỳ cách nào. Bạn có thể kết hợp với overflow-clip-margin để mở rộng vùng cắt ra ngoài phần tử một khoảng nhất định, ví dụ overflow-clip-margin: 10px. clip phù hợp khi bạn chỉ cần cắt nội dung về mặt hiển thị mà không muốn nó trở thành vùng cuộn.

Overflow-x và overflow-y

Thay vì áp dụng một giá trị cho cả hai chiều, bạn có thể kiểm soát từng trục riêng bằng overflow-x (trục ngang) và overflow-y (trục dọc). Cách này rất hữu ích khi bạn muốn cuộn dọc nhưng ẩn phần tràn ngang.

.box {
  width: 200px;
  height: 100px;
  overflow-x: hidden;
  overflow-y: auto;
}

Bạn cũng có thể viết gọn bằng hai giá trị trong overflow, trong đó giá trị đầu áp dụng cho trục ngang và giá trị sau áp dụng cho trục dọc. Nếu chỉ khai báo một giá trị, trình duyệt áp dụng giá trị đó cho cả hai trục.

.box {
  overflow: hidden auto;
}

Một lưu ý quan trọng: nếu một trục dùng hidden, scroll hoặc auto trong khi trục còn lại để visible, trình duyệt sẽ tự chuyển trục visible thành auto. Đây là nguyên nhân của nhiều trường hợp thanh cuộn tự xuất hiện ngoài ý muốn. Cách an toàn là luôn khai báo rõ giá trị cho cả hai trục.

Scrollbar-gutter: tránh giật layout khi xuất hiện thanh cuộn

Với overflow: auto, thanh cuộn chỉ xuất hiện khi nội dung tràn, khiến vùng hiển thị bị thu hẹp và layout có thể bị giật. Thuộc tính scrollbar-gutter giải quyết vấn đề này bằng cách giữ sẵn chỗ cho thanh cuộn.

.pane {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

Giá trị stable luôn dành sẵn khoảng trống cho thanh cuộn ở một bên, còn stable both-edges dành khoảng trống ở cả hai bên để giao diện cân đối. Thuộc tính này đặc biệt hữu ích với các bảng điều khiển hoặc danh sách có nội dung thay đổi liên tục.

Kết hợp overflow với text-overflow để cắt chữ thành dấu ba chấm

Khi muốn một dòng văn bản quá dài tự cắt và hiển thị dấu …, bạn kết hợp overflow: hidden với white-space: nowrap và text-overflow: ellipsis. Ba khai báo này cần dùng cùng nhau thì hiệu ứng mới hoạt động.

.title {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Kết quả: tiêu đề dài chỉ hiển thị vừa trong 200px và kết thúc bằng dấu ba chấm. Kỹ thuật này thường dùng cho tiêu đề bài viết, tên sản phẩm trong danh sách hoặc tên file trong bảng dữ liệu.

Các ứng dụng thực tế của overflow

Ngoài việc xử lý nội dung tràn, overflow còn xuất hiện trong nhiều tình huống thiết kế giao diện quen thuộc. Dưới đây là ba trường hợp bạn sẽ gặp thường xuyên nhất.

Bảng dữ liệu cuộn ngang trên điện thoại

Bảng có nhiều cột thường rộng hơn màn hình điện thoại. Bạn bọc bảng trong một khung có overflow-x: auto để người dùng cuộn ngang trong khung thay vì làm cả trang bị tràn.

css

.table-wrapper {
  overflow-x: auto;
}

Khóa cuộn trang khi mở popup

Khi hiển thị popup hoặc menu toàn màn hình, bạn thêm overflow: hidden cho thẻ body để người dùng không cuộn được nội dung phía sau. Khi đóng popup, bạn gỡ khai báo này để trang cuộn trở lại bình thường.

css

body.modal-open {
  overflow: hidden;
}

Bo góc cho ảnh và khối nội dung

Khi phần tử cha có border-radius, nội dung bên trong như ảnh vẫn có thể lòi ra ngoài góc bo. Thêm overflow: hidden cho phần tử cha sẽ cắt nội dung theo đúng góc bo đó.

css

.card {
  border-radius: 12px;
  overflow: hidden;
}

Vấn đề thường gặp khi sử dụng overflow CSS

Dù cú pháp đơn giản, overflow lại là nguồn gốc của khá nhiều lỗi giao diện khó phát hiện. Dưới đây là những lỗi bạn nên lưu ý khi viết CSS.

Nội dung của phần tử con bị cắt mất

Khi phần tử cha dùng overflow: hidden, mọi thứ vượt ra ngoài phần tử đó đều bị cắt, bao gồm menu dropdown, tooltip hay hiệu ứng box-shadow của phần tử con. Cách xử lý là chuyển overflow sang một phần tử bao khác hoặc đặt lại cấu trúc để phần tử cần tràn nằm ngoài vùng bị cắt.

Position sticky không hoạt động

position: sticky sẽ mất tác dụng nếu một phần tử cha của nó có overflow khác visible, vì lúc này phần tử cha trở thành vùng cuộn riêng. Khi gặp lỗi này, hãy kiểm tra toàn bộ chuỗi phần tử cha để tìm khai báo overflow gây ra vấn đề.

Phần tử cha không bao được phần tử con dùng float

Phần tử con dùng float không được tính vào chiều cao của phần tử cha, khiến khung cha bị co lại. Trước đây nhiều lập trình viên xử lý bằng overflow: hidden, nhưng cách này dễ gây ra lỗi cắt nội dung ở trên. Giải pháp gọn hơn là dùng display: flow-root cho phần tử cha.

Vùng cuộn lồng nhau trên thiết bị di động

Đặt một vùng cuộn bên trong một vùng cuộn khác khiến người dùng dễ cuộn nhầm hoặc bị kẹt trên màn hình cảm ứng. Bạn nên hạn chế lồng nhiều vùng cuộn và kiểm tra kỹ trên nhiều kích thước màn hình.

Khả năng truy cập bằng bàn phím và trình đọc màn hình

Những vùng nội dung có thể cuộn cần được người dùng bàn phím truy cập được. Bạn có thể thêm tabindex="0" cho vùng cuộn để người dùng có thể focus và cuộn bằng phím mũi tên, đồng thời tránh cắt mất nội dung quan trọng bằng hidden hoặc clip.

Lời kết

Trên đây là những nội dung về thuộc tính Overflow trong CSS, các giá trị và ví dụ minh họa chi tiết. Ngoài ra, nếu bạn quan tâm tới dịch vụ lưu trữ của LANIT như Hosting giá rẻ, vps giá rẻ hay thuê máy chủ riêng, liên hệ ngay với chúng tôi nhé!