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

Podcast CSS – 034: Mục bổ sung

Khi nội dung vượt ra khỏi nội dung gốc, bạn có nhiều cách để xử lý nội dung đó. Bạn có thể cuộn để thêm không gian bổ sung, cắt các cạnh tràn, biểu thị phần cắt bằng dấu ba chấm, v.v. Trường hợp 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 cách cắt xén trong CSS; text-overflow sẽ giúp bạn xử lý từng dòng văn bản và thuộc tính overflow sẽ giúp kiểm soát tràn trong mô hình hộp.

Tràn một dòng với 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, chẳng hạn như 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 văn bản 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 trên một trang đều nằm trong nút văn bản. Để sử dụng text-overflow, bạn cần có một dòng văn bản chưa được gói, do đó, bạn cũng phải đặt overflow thành hidden và có giá trị white-space ngăn việc xuống dòng.

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

Sử dụng thuộc tính overflow (mục bổ sung)

Thuộc tính mục bổ sung được đặt trên một phần tử để kiểm soát điều sẽ xảy ra khi phần tử con của phần tử đó cần nhiều không gian hơn mức có sẵn. Điều này có thể là có chủ ý, giống như trong bản đồ tương tác như Google Maps, trong đó người dùng xoay xung quanh một hình ảnh lớn được cắt theo một kích thước cụ thể. Điều này cũng có thể không chủ ý như trong ứng dụng trò chuyện, trong đó 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ể xem phần tràn (overflow) trong hai phần. Phần tử mẹ có một không gian được ràng buộc chắc chắn và sẽ không thay đổi. Bạn có thể coi đây là một cửa sổ. Các phần tử con là nội dung cần có thêm không gian từ phần tử mẹ. Bạn có thể coi đây là những gì bạn đang nhìn qua cửa sổ. Việc quản lý mục bổ sung sẽ giúp hướng dẫn cách cửa sổ tạo khung cho nội dung này.

Cuộn trên trục tung và trục ngang

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

Các chế độ điều khiển thuộc tính overflow-x tràn dọc theo trục ngang của khung nhìn thiết bị, do đó bạn có thể cuộn sang trái và sang phải.

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

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

Viết tắt overflow

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

overflow: hidden scroll;

Nếu bạn chỉ định hai từ khoá, 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 đều 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ó sẵn cho các thuộc tính overflow.

overflow: visible (mặc định)

Nếu bạn không thiết lập thuộc tính thì overflow: visible sẽ là giá trị mặc định cho web. Điều này đảm bảo nội dung không bao giờ vô tình bị ẩn và tuân theo nguyên lý cốt lõi "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 được 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 để người dùng có thể cuộn qua nội dung. Ngay cả khi nội dung hiện không bị 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 thay đổi kích thước) và chuẩn bị hình ảnh cho người dùng xem các khu vực có thể cuộn được.

overflow: clip

Giống như overflow: hidden, nội dung có overflow: clip được cắt theo hộp khoảng đệm của phần tử. Điểm khác biệt giữa clip và hidden là từ khoá clip cũng cấm mọi 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 là giá trị thường dùng nhất, overflow: auto. Điều này tôn trọng lựa chọn ưu tiên của người dùng và hiện thanh cuộn nếu cần, nhưng ẩn thanh cuộn theo mặc định, đồng thời chịu trách nhiệm cuộn sang người dùng và trình duyệt.

Thao tác cuộn và mục bổ sung

Nhiều hành vi trong số overflow này tạo ra một thanh cuộn, nhưng có một số hành vi và thuộc tính 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.

Thao tác cuộn và khả năng hỗ trợ tiếp cận

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

Để cho phép một hộp cuộn chấp nhận tiêu điểm, hãy thêm tabindex="0", tên có thuộc tính aria-labelledby và 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 đó, CSS có thể được dùng để cho biết hộp có tâm điểm, sử dụng thuộc tính outline để đưa ra gợi ý bằng hình ảnh cho thấy hộp giờ có thể cuộn được.

Trong bài viết Sử dụng CSS để thực thi khả năng hỗ trợ tiếp cận, Adrian Roselli minh hoạ cách CSS có thể giúp ngăn chặn hiện tượng hồi quy hỗ trợ tiếp cận. Ví dụ: để chỉ bật tính năng cuộn và thêm chỉ báo lấy tiêu điểm nếu sử dụng đúng các thuộc tính. Các quy tắc sau đây sẽ chỉ làm cho hộp có thể cuộn được nếu 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

Các thanh cuộn chiếm không gian trong hộp khoảng đệm và có thể cạnh tranh về 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 thay đổi bố cục tiềm năng này.

thanh cuộn gốc so với thanh cuộn ngầm ẩn

Bạn có thể nhận thấy rằng một số trình 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 trên thiết bị di động và ứng dụng kết hợp. Hành vi cuộn này xảy ra trên thanh cuộn gốc. Chỉ có một trình cuộn gốc trên một trang. Theo mặc định, documentElement là trình cuộn gốc của trang. Tuy nhiên, bằng cách 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 trình cuộn ngoài documentElement, chúng ta gọi trình cuộn mới này là trình cuộn gốc ngầm ẩn.

Để tạo trình cuộn gốc, bạn có thể sử dụng chương trình khuyến mãi dành cho người cuộn bằng cách đặt một vùng chứa là cố định, đảm bảo vùng chứa đó bao phủ toàn bộ khung nhìn và nằm ở chỉ mục z ở trên cùng bằng thanh cuộn. Trải nghiệm trình cuộn gốc so với trình cuộn ngầm được lồng tại đây.

hành vi cuộn

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

Điều này đặc biệt hữu ích khi sử dụng cùng với prefers-reduced-motion (ưu tiên-giảm-chuyển động) để 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;
  }
}

hành vi cuộn quá mức

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

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về overflow (mục bổ sung)

Tài nguyên

overflow và mất dữ liệu trong CSS của Smashing journal