Trình đơn mục bổ sung

The CSS Podcast – 034: Tràn lề

Khi nội dung mở rộng ra ngoài thành phần mẹ, bạn có nhiều cách để xử lý nội dung đó. Bạn có thể cuộn để thêm không gian, cắt bớt các cạnh tràn, chỉ báo phần bị cắt bằng dấu ba chấm, v.v. Tình trạng tràn là đặc biệt quan trọng cần xem xét khi phát triển cho các ứng dụng dành cho điện thoại và nhiều kích thước màn hình.

Có hai tuỳ chọn cắt khác nhau trong CSS; text-overflow sẽ giúp cắt từng dòng văn bản và các thuộc tính overflow sẽ giúp kiểm soát tình trạng tràn trong mô hình hộp.

tràn một dòng bằng text-overflow

Sử dụng thuộc tính text-overflow trên bất kỳ phần tử nào chứa (các) nút văn bản, ví dụ: một đoạn văn bản, <p>. Thuộc tính này chỉ định cách văn bản xuất hiện khi không vừa với không gian có sẵn của phần tử. Tất cả văn bản HTML có thể xem được trên một trang đều nằm trong nút văn bản. Để sử dụng text-overflow, bạn cần một dòng văn bản chưa được gói. Vì vậy, bạn cũng phải đặt overflow thành hidden và có giá trị white-space để ngăn việc gói.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Sử dụng thuộc tính tràn

Thuộc tính tràn được đặt trên một phần tử để kiểm soát điều sẽ xảy ra khi các phần tử con của nó cần nhiều không gian hơn mức có sẵn. Điều này có thể là cố ý, chẳng hạn như trong một bản đồ tương tác như Google Maps, nơi người dùng xoay quanh một hình ảnh lớn được cắt theo kích thước cụ thể. Việc này cũng có thể là do vô tình, chẳng hạn như trong ứng dụng trò chuyện, người dùng nhập một tin nhắn dài không vừa với bong bóng văn bản.

Bạn có thể coi phần tràn là hai phần. Phần tử mẹ có một không gian bị ràng buộc cố định và không thay đổi. Bạn có thể xem đây là một cửa sổ. Phần tử con là nội dung cần nhiều không gian hơn từ phần tử mẹ. Bạn có thể xem đây là nội dung mà bạn đang nhìn qua cửa sổ. Việc quản lý vùng tràn sẽ giúp định hướng cách cửa sổ đóng khung nội dung này.

Cuộn theo trục dọc và trục ngang

Thuộc tính overflow-y kiểm soát phần tràn thực tế dọc theo trục tung của khung nhìn thiết bị, nhờ đó cuộn lên và xuống.

Thuộc tính overflow-x kiểm soát tình trạng tràn dọc theo trục ngang của khung nhìn thiết bị, do đó, cuộn sang trái và phải.

Thuộc tính logic cho hướng cuộn

Các thuộc tính overflow-inline và overflow-block đặt chế độ tràn dựa trên hướng tài liệu và chế độ ghi.

Ký hiệu viết tắt overflow

Viết tắt overflow đặt cả kiểu overflow-x và overflow-y trên một dòng:

overflow: hidden scroll;

Nếu bạn chỉ định hai từ khoá, thì từ khoá đầu tiên sẽ áp dụng cho overflow-x và từ khoá thứ hai sẽ áp dụng cho overflow-y. Nếu không, cả overflow-x và overflow-y sẽ sử dụng cùng một giá trị.

Giá trị

Hãy cùng tìm hiểu kỹ hơn về các giá trị và từ khoá có thể dùng cho tài sản overflow.

overflow: visible (mặc định)

Nếu bạn không đặt thuộc tính này, overflow: visible sẽ là giá trị mặc định cho web. Điều này giúp đảm bảo rằng nội dung không bao giờ bị ẩn do nhầm lẫn và tuân thủ các nguyên tắc cốt lõi là "không bao giờ ẩn nội dung" hoặc "bố cục an toàn của bố cục chính xác".

overflow: hidden

Với overflow: hidden, nội dung sẽ bị cắt theo hướng đã chỉ định và không có thanh cuộn nào được cung cấp để hiển thị nội dung đó.

overflow: scroll

overflow: scroll bật thanh cuộn để cho phép người dùng cuộn qua nội dung. Ngay cả khi nội dung hiện không tràn, thanh cuộn vẫn sẽ xuất hiện. Đây là một cách hiệu quả để giảm sự thay đổi bố cục trong tương lai nếu một vùng chứa có thể cuộn được trong tương lai, chẳng hạn như dựa trên việc đổi kích thước và chuẩn bị trực quan cho người dùng về các khu vực có thể cuộn.

overflow: clip

Giống như overflow: hidden, nội dung có overflow: clip được cắt vào hộp khoảng đệm của phần tử. Sự khác biệt giữa clip và hidden là từ khoá clip cũng cấm tất cả thao tác cuộn, bao gồm cả thao tác cuộn có lập trình.

overflow: auto

Cuối cùng, giá trị thường dùng nhất là overflow: auto. Điều này tuân theo lựa chọn ưu tiên của người dùng và hiển thị thanh cuộn nếu cần, nhưng ẩn thanh cuộn theo mặc định và giao trách nhiệm cuộn cho người dùng và trình duyệt.

Cuộn và tràn

Nhiều hành vi overflow trong số này tạo ra thanh cuộn, nhưng có một số hành vi và thuộc tính cuộn cụ thể có thể giúp bạn kiểm soát việc cuộn trên vùng chứa mục bổ sung.

Cuộn và hỗ trợ tiếp cận

Điều quan trọng là phải đảm bảo rằng vùng có thể cuộn có thể chấp nhận tiêu điểm để người dùng bàn phím có thể nhấn phím Tab để chuyển đến hộp, sau đó sử dụng các phím mũi tên để cuộn.

Để cho phép hộp cuộn chấp nhận tiêu điểm, hãy thêm tabindex="0", một tên có thuộc tính aria-labelledby và một thuộc tính role thích hợp. Ví dụ:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

Sau đó, bạn có thể sử dụng CSS để cho biết rằng hộp có tiêu điểm, sử dụng thuộc tính outline để đưa ra gợi ý trực quan rằng hộp đó hiện có thể cuộn được.

Trong bài viết Sử dụng CSS để thực thi tính năng hỗ trợ tiếp cận, Adrian Roselli minh hoạ cách CSS có thể giúp ngăn chặn sự hồi quy về tính năng hỗ trợ tiếp cận. Ví dụ: chỉ bật tính năng cuộn và thêm chỉ báo tiêu điểm nếu sử dụng đúng thuộc tính. Các quy tắc sau đây sẽ chỉ cho phép cuộn hộp nếu hộp có thuộc tính tabindex, aria-labelledby và role.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

Vị trí thanh cuộn trong mô hình hộp

Thanh cuộn chiếm không gian trong hộp khoảng đệm và có thể cạnh tranh không gian nếu inline chứ không phải overlaid. Mô-đun mô hình hộp mở rộng thêm về nguồn tiềm ẩn này của việc thay đổi bố cục.

root-scroller so với implicit-scroller

Bạn có thể nhận thấy một số thanh cuộn có hành vi kéo để làm mới và các hành vi đặc biệt khác, đặc biệt là khi phát triển cho các ứng dụng di động và kết hợp. Hành vi cuộn này xảy ra trên thanh cuộn gốc. Mỗi trang chỉ có một trình cuộn gốc. Theo mặc định, documentElement là trình cuộn gốc của trang. Tuy nhiên, khi thay đổi phần tử nào là trình cuộn gốc, các hành vi đặc biệt có thể được áp dụng cho các trình cuộn khác với documentElement, chúng tôi gọi trình cuộn mới này là trình cuộn gốc ngầm ẩn.

Để tạo một trình cuộn gốc, bạn có thể sử dụng một tính năng có tên là quảng cáo hiệu ứng cuộn bằng cách đặt một vùng chứa ở vị trí cố định, đảm bảo vùng chứa bao phủ toàn bộ khung nhìn và chỉ mục z ở trên cùng bằng một trình cuộn. Trải nghiệm thanh cuộn gốc so với thanh cuộn ngầm ẩn lồng nhau tại đây.

scroll-behavior

scroll-behavior cho phép bạn chọn sử dụng tính năng cuộn do trình duyệt kiểm soát đến các phần tử. Thao tác này cho phép bạn chỉ định cách xử lý các thao tác điều hướng trong trang như .scrollTo() hoặc các đường liên kết.

Điều này đặc biệt hữu ích khi dùng với prefers-reduced-motion để chỉ định hành vi cuộn dựa trên lựa chọn ưu tiên của người dùng.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

Nếu bạn đã từng đến cuối lớp phủ phương thức, sau đó tiếp tục cuộn và di chuyển trang phía sau lớp phủ, thì đây là quá trình tạo chuỗi cuộn hoặc chuyển lên vùng chứa cuộn mẹ. Thuộc tính overscroll-behavior cho phép bạn ngăn tình trạng tràn khi cuộn rò rỉ vào vùng chứa mẹ (được gọi là chuỗi cuộn).

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về tình trạng tràn

Tài nguyên

Luồng dữ liệu tràn và mất dữ liệu trong CSS do Smashing Magazine