Bố cục của văn bản, đặc biệt là ở cuối dòng và cuối đoạn, có thể ảnh hưởng đến mức độ dễ đọc và tính thẩm mỹ của trang. CSS cung cấp một số tuỳ chọn xuống dòng tự động có thể cải thiện các trường hợp sử dụng cụ thể.
Đối với các khối văn bản ngắn như tiêu đề, hãy sử dụng text-wrap: balance. Thuộc tính này hướng dẫn trình duyệt phân phối văn bản đồng đều nhất có thể trên các dòng, tạo ra giao diện cân đối hơn.
Thuộc tính CSS text-wrap: pretty cho phép bạn cải thiện chất lượng kiểu chữ của văn bản nội dung bằng cách bật thuật toán xuống dòng phức tạp hơn. Thuộc tính này được thiết kế riêng để ngăn chặn "từ mồ côi" (từ đơn lẻ ở dòng cuối cùng của đoạn văn) và tạo ra một "rag" (đoạn văn bản không đều) trực quan dễ chịu hơn cho các khối văn bản dài.
Triển khai
1. Xác định các phần tử văn bản:
Đối với text-wrap: balance, hãy chọn các khối văn bản ngắn như tiêu đề và tiêu đề bảng. Tránh các phần tử có hộp hiển thị như đường viền hoặc nền, vì điều này có thể tạo ra các vùng trống không mong muốn trong bố cục.
Đối với text-wrap: pretty, hãy chọn các phần tử có khả năng chứa các đoạn văn bản dài, trong đó các từ mồ côi (từ đơn lẻ) hoặc dấu ngắt dòng không hợp lý là dễ nhận thấy nhất. Điều này bao gồm các yếu tố sau:
<p><blockquote><li>- Bất kỳ phần tử nào khác có thể chứa các đoạn văn bản dài.
Chọn phương thức gói phù hợp
| Tiêu chí | text-wrap: balance |
text-wrap: pretty |
text-wrap: wrap (Mặc định) |
|---|---|---|---|
| Phù hợp nhất với | Khối ngắn (Tiêu đề, Tiêu đề) | Khối dài (Đoạn văn, Danh sách) | Nội dung quan trọng về hiệu suất |
| Mục tiêu về hình ảnh | Độ dài dòng đối xứng | Tránh dòng đơn ("dòng ngắn") | Gói nhanh, tiêu chuẩn |
| Các quy tắc ràng buộc về dòng | Tối đa 6 – 10 dòng (giới hạn của thuật toán) | Phù hợp nhất cho 3 dòng trở lên | Không giới hạn |
| Chi phí hiệu suất | Cao: Thuật toán tìm kiếm nhị phân | Trung bình: Thuật toán xem lại | Thấp: Thuật toán tham lam tiêu chuẩn |
2. Áp dụng kiểu ngắt dòng đã chọn:
Áp dụng text-wrap: balance cụ thể cho các phần tử ngắn, nhiều dòng như tiêu đề (h1-h6), tiêu đề phụ hoặc trích dẫn.
/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
/* Enables balanced line-breaking logic */
text-wrap: balance;
}
Sử dụng text-wrap: pretty để bật thuật toán tối ưu hoá giúp đánh giá một vài dòng cuối của đoạn văn để tìm điểm ngắt phù hợp nhất.
/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
/* Enables pretty line-breaking logic for body copy */
text-wrap: pretty;
}
Các quy định hạn chế và hiệu suất quan trọng
text-wrap: balance
- Giới hạn dòng: Trình duyệt áp đặt giới hạn về số dòng mà trình duyệt sẽ cố gắng cân bằng để duy trì hiệu suất (thường là 6 dòng trong Chromium và 10 dòng trong Firefox). Nếu văn bản vượt quá giới hạn này, trình duyệt sẽ quay lại hành vi
wrapchuẩn. Tránh sử dụngtext-wrap: balancetrên các khối văn bản có khả năng vượt quá các giới hạn này. - Ứng dụng được nhắm mục tiêu: KHÔNG áp dụng
text-wrap: balancetrên toàn cầu (ví dụ:* { text-wrap: balance; }). Thuật toán "tìm kiếm nhị phân" lặp lại mà trình duyệt sử dụng tốn nhiều tài nguyên tính toán. Hạn chế sử dụng thuộc tính này cho các phần tử văn bản ngắn và cụ thể. - Tương tác với chiều rộng:
text-wrap: balancekhông thay đổi chiều rộng của vùng chứa (inline-size). Thuộc tính này chỉ ảnh hưởng đến cách xuống dòng tự động của văn bản trong chiều rộng đó. Điều này có thể để lại khoảng trống ở cuối vùng chứa, ảnh hưởng đến bố cục dựa vào khối văn bản có chiều rộng đầy đủ.
text-wrap: pretty
- Hiệu suất so với chất lượng: BẮT BUỘC:
text-wrap: prettytốn nhiều tài nguyên tính toán hơn thuật toánwrap(tham lam) mặc định vì thuật toán này đánh giá nhiều dòng (thường là bốn dòng cuối cùng) để tối ưu hoá các điểm ngắt. Tránh áp dụng thuộc tính này trên toàn bộ trang cho mọi phần tử nếu trang của bạn có quá nhiều nội dung văn bản. - Phù hợp nhất với văn bản nhiều dòng: Lợi ích của
prettythể hiện rõ nhất trong các đoạn văn có từ 3 dòng trở lên. Thuộc tính này có ít hoặc không có tác dụng đối với văn bản ngắn, một dòng. - Hành vi theo trình duyệt cụ thể: Xin lưu ý rằng thông tin chi tiết về cách triển khai sẽ khác nhau. Các trình duyệt dựa trên Chromium thường tập trung vào 4 dòng cuối, trong khi các công cụ khác có thể đánh giá toàn bộ đoạn văn.
Chiến lược dự phòng
Trong các trình duyệt không hỗ trợ text-wrap: balance hoặc text-wrap: pretty, thuộc tính này sẽ bị bỏ qua và văn bản sẽ xuống dòng theo hành vi wrap mặc định. Đây là một tính năng cải tiến tăng dần, có thể xuống cấp nhẹ thành kiểu chữ chuẩn. Điều này đảm bảo rằng nội dung của bạn vẫn có thể đọc được trên tất cả các trình duyệt, đồng thời mang lại trải nghiệm vượt trội cho những trình duyệt hỗ trợ nội dung đó.
Đối với các bố cục quan trọng cần có bố cục văn bản tinh tế, hãy sử dụng thư viện JavaScript, nhưng lưu ý rằng việc này có thể chậm và gây ra vấn đề về hiệu suất.