Ngắt dòng - Thủ thuật CSS

line-breakThuộc tính CSS xác định mức độ thực thi nghiêm ngặt các quy tắc để gói văn bản trên các dòng mới, đặc biệt khi làm việc với các ký hiệu và dấu chấm câu trong hệ thống chữ viết Trung Quốc, Nhật Bản hoặc Hàn Quốc (CJK). Nó được bao gồm trong đặc tả mô-đun văn bản CSS cấp độ 3, hiện đang ở trong Bản nháp của người biên tập.

.element ( line-break: strict; )

Bản giới thiệu

Cú pháp

line-break: auto | loose | normal | strict | anywhere;

Ban đầu: auto
Áp dụng cho: tất cả các phần tử
Kế thừa: có
Giá trị tính toán: như đã chỉ định
Loại hoạt ảnh: rời rạc

Giá trị

/* Keyword values */ line-break: auto; line-break: loose; line-break: normal; line-break: strict; line-break: anywhere; /* Global values */ line-break: inherit; line-break: initial; line-break: unset;

auto: Điều này cho phép trình duyệt quyết định cách nó thực hiện ngắt dòng. Mỗi trình duyệt có thể khác nhau về tiêu chí dựa trên các yếu tố, bao gồm cả độ dài dòng.
loose: Đây là biện pháp thực thi nhẹ nhất đối với các quy tắc vi phạm dòng. Thông số kỹ thuật trích dẫn các dòng văn bản ngắn, giống như những dòng văn bản mà chúng ta có thể thấy trên báo, làm ví dụ trong đó giá trị này có thể được sử dụng.
normal: Điều này phá vỡ các dòng văn bản dựa trên bộ quy tắc "phổ biến nhất". (Lưu ý rằng không có định nghĩa nào được cung cấp về bộ quy tắc phổ biến nhất là gì hoặc nó có thể chứa những gì.)
strict: Điều này thực thi bộ quy tắc nghiêm ngặt nhất cho ngắt dòng.
anywhere: Giá trị này cho phép cơ hội bọc mềm, cho phép ngắt văn bản ở khoảng cách hoặc dấu chấm câu thay vì chỉ giới hạn từ. Nó lý tưởng cho các ngôn ngữ có thể không sử dụng dấu cách hoặc dấu câu để phân tách các từ. Thông số cho biết CSS không xác định các cơ hội bọc mềm và giá trị này nhận biết và thúc đẩy chúng áp dụng các quy tắc ngắt dòng. Thông số mô tả hành vi gói văn bản giống như những gì chúng ta thường thấy trong một thiết bị đầu cuối.

Thông số kỹ thuật cũng lưu ý rằng anywheregiá trị cho phép các khoảng trắng được bảo toàn ở cuối dòng chuyển sang dòng tiếp theo khi được sử dụng với thuộc white-spacetính được đặt thành break-spaces.

Hành vi giá trị trên các ngôn ngữ khác nhau

Như bạn có thể tưởng tượng, các ngôn ngữ khác nhau có các tùy chọn khác nhau khi nói đến cách văn bản được chia thành các dòng mới. Không có quy ước tiêu chuẩn nào được sử dụng bởi tất cả các ngôn ngữ. Điều đó phụ thuộc vào các trình duyệt để tìm ra và tuân theo các quy tắc "đúng" cho một ngôn ngữ cụ thể. Nhưng đặc điểm kỹ thuật nêu ra một số yêu cầu để xác định xem có được phép ngắt dòng ở các mức độ line-breaknghiêm ngặt khác nhau trong một số tình huống nhất định hay không. Chúng tôi sẽ trình bày những điều đó ở đây.

Tình hình	`normal`	`loose`	`strict`
Dấu ngắt trước chữ kana nhỏ trong tiếng Nhật hoặc dấu âm kéo dài Katakana-Hiragana, tức là ký tự từ lớp ngắt dòng Unicode `CJ`	❌	✅	✅
Dấu ngắt trước một số ký tự giống dấu gạch nối CJK: 〜 U + 301C, ゠ U + 30A0	❌	✅ nếu hệ thống chữ viết là tiếng Trung hoặc tiếng Nhật	Được phép, nếu hệ thống chữ viết là tiếng Trung hoặc tiếng Nhật
Dấu ngắt trước một số ký tự giống dấu gạch nối CJK: 〜 U + 301C, ゠ U + 30A0	❌	✅ nếu ký tự đứng trước thuộc lớp ngắt dòng Unicode `ID`(kể cả khi ký tự đứng trước được coi là `ID`do`word-break: break-all)`	❌
Dấu ngắt trước các dấu lặp: 々 U + 3005, 〻 U + 303B, ゝ U + 309D, ゞ U + 309E, ヽ U + 30FD, ヾ U + 30FE	❌	✅	❌
Dấu ngắt giữa các ký tự không thể tách rời (chẳng hạn như ‥ U + 2025,… U + 2026) tức là các ký tự từ lớp ngắt dòng Unicode `IN`	❌	✅	❌
Ngắt trước một số dấu câu căn giữa: ・ U + 30FB, ： U + FF1A, ； U + FF1B, ･ U + FF65,‼ U + 203C,⁇ U + 2047,⁈ U + 2048,⁉ U + 2049,！ U + FF01,？ U + FF1F	❌	✅	❌
Breaks trước hậu tố: Nhân vật với lớp dòng bẻ Unicode `PO`và tài sản Đông Á Width `Ambiguous`, `Fullwidth`hoặc `Wide`.	❌	✅	❌
Breaks sau các tiền tố: Nhân vật với lớp dòng bẻ Unicode `PR`và tài sản Đông Á Width `Ambiguous`, `Fullwidth`hoặc `Wide`.	❌	✅	❌