Các hyphenskiểm soát tài sản dùng dấu gạch nối của văn bản trong các yếu tố khối cấp. Bạn có thể ngăn dấu gạch nối xảy ra, cho phép hoặc chỉ cho phép khi có một số ký tự nhất định.
Lưu ý rằng hyphensngôn ngữ nhạy cảm. Khả năng tìm kiếm cơ hội nghỉ của nó phụ thuộc vào ngôn ngữ, được xác định trong langthuộc tính của phần tử mẹ. Không phải tất cả các ngôn ngữ đều được hỗ trợ và việc hỗ trợ phụ thuộc vào trình duyệt cụ thể.
Cú pháp
p ( hyphens: none | manual | auto )dấu gạch nối: không có
Các từ không bao giờ được gạch nối khi ngắt dòng, ngay cả khi các ký tự bên trong từ gợi ý vị trí có thể hoặc nên sử dụng dấu gạch nối.
gạch nối: thủ công
Các từ chỉ được ngắt dòng khi có các ký tự bên trong từ gợi ý các cơ hội ngắt dòng. Có hai ký tự gợi ý cơ hội ngắt dòng:
U+2010(HYPHEN): ký tự gạch nối “cứng” cho biết cơ hội ngắt dòng có thể nhìn thấy. Ngay cả khi dòng thực sự không bị ngắt tại điểm đó, dấu gạch nối vẫn được hiển thị. Nghĩa đen là “-“.U+00AD(SHY): dấu gạch nối vô hình, "mềm". Nhân vật này không được hiển thị rõ ràng; thay vào đó, nó gợi ý một nơi mà trình duyệt có thể chọn ngắt từ nếu cần. Trong HTML, bạn có thể sử dụng-để chèn dấu gạch nối mềm.
dấu gạch nối: auto
Các từ có thể bị ngắt ở các điểm gạch nối thích hợp được xác định bởi các ký tự gạch nối (xem ở trên) bên trong từ hoặc được xác định tự động bởi tài nguyên gạch nối phù hợp với ngôn ngữ (nếu được hỗ trợ bởi trình duyệt hoặc được cung cấp thông qua @hyphenation-resource).
Các ký tự gạch nối có điều kiện bên trong một từ, nếu có, được ưu tiên hơn các tài nguyên tự động khi xác định điểm gạch nối trong từ.
dấu gạch ngang: tất cả
Không dùng nữa, không sử dụng . Đây chỉ là thông số kỹ thuật tạm thời để thử nghiệm.
Bản giới thiệu
Bản demo dưới đây có một loạt các đoạn văn và mọi thứ được thiết lập hyphens: auto;để chứng minh khái niệm về dấu gạch nối. Các langthuộc tính được thiết lập để envào yếu tố phụ huynh.
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5.1 * |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
Yêu cầu Safari 5+ -webkit-, Firefox 6+ yêu cầu -moz-, IE 10+ yêu cầu -ms-, iOS 4.2+ yêu cầu -webkit-.
Chrome <55 và trình duyệt Android thực sự hỗ trợ -webkit-hyphens: none, đây là giá trị mặc định, nhưng không có giá trị nào khác.
Trong Firefox và Internet Explorer, dấu gạch nối tự động chỉ hoạt động đối với một số ngôn ngữ (được xác định bằng langthuộc tính). Xem ghi chú này để biết danh sách đầy đủ các ngôn ngữ được hỗ trợ.
Nếu bạn đang viết một tài liệu dựa trên web thực sự cần dấu gạch nối, bạn có thể sử dụng Hyphenator.js, một thư viện dựa trên một từ điển rộng lớn sẽ tự động đưa dấu gạch nối mềm và khoảng trắng bằng không vào nội dung của bạn.
Nếu không có JavaScript, bạn sẽ phải dựa vào cả hai hyphensvà word-wrap:
.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )