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. Bạn cần đặc biệt cân nhắc đến tình trạng tràn khi phát triển ứ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 dòng đơn 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 những gì xảy ra khi các phần tử con cần nhiều không gian hơn không gian hiện có. Đ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ó không gian bị ràng buộc chắc chắn và không thay đổi. Bạn có thể coi đâ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ể coi đây là nội dung 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 tình trạng tràn thực tế dọc theo trục dọc của khung nhìn thiết bị, do đó, 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.
Chữ viết tắt overflow
Phương thức viết tắt overflow
đặt cả kiểu overflow-x
và overflow-y
trong 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 xem xét kỹ hơn 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 đặ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ữaclip
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 sẽ đưa 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 thao tác cuộn trên vùng chứa tràn.
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 rằng 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. Chỉ có một thanh cuộn gốc trên một trang. Theo mặc định, documentElement là thanh cuộn gốc của trang. Tuy nhiên, bằng cách thay đổi phần tử nào là thanh cuộn gốc, bạn có thể áp dụng các hành vi đặc biệt cho các thanh cuộn khác ngoài documentElement. Chúng tôi gọi thanh cuộn mới này là thanh cuộn gốc ngầm ẩn.
Để tạo một thanh cuộn gốc, bạn có thể sử dụng tính năng nâng cấp thanh cuộn bằng cách đặt một vùng chứa cố định, đảm bảo vùng chứa đó bao phủ toàn bộ khung nhìn và có chỉ mục z ở trên cùng với thanh 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ử. Điều này cho phép bạn chỉ định cách xử lý các thành phần điều hướng trong trang như .scrollTo()
hoặ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 cuộn rò rỉ vào vùng chứa mẹ (được gọi là chuỗi cuộn).
Kiểm tra mức độ hiểu biết
Kiểm tra kiến thức của bạn về tình trạng tràn
Lỗi tràn văn bản và lỗi tràn phần tử có giống nhau không?
Thuộc tính overflow
chấp nhận 2 từ khoá, từ khoá đầu tiên là cho trục nào?
Thanh cuộn sử dụng không gian nào trong mô hình hộp khi hiển thị và cùng dòng?
Để giữ lại động lượng khi cuộn trong một thanh cuộn ngầm ẩn lồng nhau, bạn sẽ sử dụng thuộc tính nào?
overscroll-behavior
overscroll-effect
scroll-hint
scroll-padding
scroll-behavior