Chọn sử dụng tính năng ngắt dòng văn bản được tối ưu hoá để có giao diện đẹp hơn thay vì tốc độ.
Từ Chrome 117, bạn có thể sử dụng tính năng xuống dòng tự động mới – text-wrap: pretty trong CSS Text Level 4 (Văn bản CSS 4).
p {
text-wrap: pretty;
}
Widow và orphan (từ lẻ và từ mồ côi) trong kiểu chữ là các từ đơn lẻ đứng riêng ở cuối một đoạn văn hoặc khối văn bản. Dòng bị ngắt là những từ đứng một mình ở đầu một khối văn bản và dòng bị cô lập là những từ đứng một mình ở cuối một khối văn bản. Các đường viền này có thể làm gián đoạn cách mắt chúng ta lướt qua văn bản, khiến nội dung khó đọc hơn. Một số nhà thiết kế tránh chúng bằng mọi giá và nỗ lực rất nhiều để ngăn chặn chúng.
Kể từ Chrome 117, bạn có thể tránh các phần tử mồ côi bằng một dòng CSS: text-wrap: pretty.
Tính năng này không chỉ đảm bảo các đoạn văn không kết thúc bằng một từ, mà còn điều chỉnh dấu gạch nối nếu các dòng được gạch nối liên tiếp xuất hiện ở cuối đoạn văn hoặc điều chỉnh các dòng trước đó để tạo khoảng trống. Phương thức này cũng sẽ điều chỉnh cho phù hợp với việc căn chỉnh văn bản. text-wrap: pretty thường dùng để xuống dòng tự động và ngắt văn bản hiệu quả hơn, hiện tập trung vào trẻ mồ côi.
Trong tương lai, text-wrap: pretty có thể cung cấp thêm các điểm cải tiến.
Ngoài ra, còn có text-wrap: balance. Phương thức này không ngăn chặn văn bản bị ngắt quãng, nhưng đảm bảo văn bản được ngắt dòng theo cách tạo ra một khối văn bản hài hòa. Cá nhân tôi sử dụng balance cho dòng tiêu đề và pretty cho các đoạn văn bản.
Nếu bạn quan tâm đến thông tin chi tiết về thuật toán dùng để xác định số lượng dòng tối ưu hoặc các yếu tố cần cân nhắc về hiệu suất, đây là đường liên kết đến tài liệu thiết kế do kỹ sư tạo ra phía sau tính năng, Koji Ishii.
Nếu bạn có đề xuất hoặc ý kiến cải thiện khác về cách ngắt dòng, chúng tôi rất mong được biết! Hãy báo cáo vấn đề trong công cụ theo dõi lỗi Chromium kèm theo thông tin chi tiết, ví dụ về dấu ngắt dòng đúng và không hợp lệ, sau đó chúng tôi sẽ liên hệ lại với bạn.