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 ngắt dòng văn bản mới – text-wrap: pretty
từ CSS Text Level 4 (Văn bản CSS cấp 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 là để giúp ngắt dòng và ngắt văn bản tốt hơn, hiện tập trung vào các dòng bị ngắt.
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ố dòng tối ưu hoặc các điểm cần cân nhắc về hiệu suất, hãy xem đường liên kết đến tài liệu thiết kế do kỹ sư Koji Ishii tạo ra.
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! Gửi 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à sai, chúng tôi sẽ liên hệ lại với bạn.