Thuộc tính CSS hyphens
chỉ định cách gạch nối các từ khi văn bản ngắt dòng trên nhiều dòng. Nó có thể ngăn gạch nối hoàn toàn, gạch nối tại các điểm được chỉ định thủ công trong văn bản hoặc để trình duyệt tự động chèn dấu gạch nối khi thích hợp
Thử nó
Ghi chú. Trong demo trên, chuỗi "Một từ tiếng Anh cực kỳ dài. " chứa ký tự
[gạch nối mềm] ẩn.
/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;
/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: revert;
hyphens: revert-layer;
hyphens: unset;
0. Ký tự này được sử dụng để chỉ ra một vị trí tiềm năng để chèn dấu gạch nối khi /* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;
/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: revert;
hyphens: revert-layer;
hyphens: unset;
1 được chỉ địnhQuy tắc gạch nối là ngôn ngữ cụ thể. Trong HTML, ngôn ngữ được xác định bởi thuộc tính
/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;
/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: revert;
hyphens: revert-layer;
hyphens: unset;
2 và các trình duyệt sẽ chỉ gạch nối nếu có thuộc tính này và có sẵn từ điển gạch nối phù hợp. Trong XML, thuộc tính /* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;
/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: revert;
hyphens: revert-layer;
hyphens: unset;
3 phải được sử dụngGhi chú. Các quy tắc xác định cách thực hiện gạch nối không được xác định rõ ràng bởi thông số kỹ thuật, do đó, gạch nối chính xác có thể khác nhau giữa các trình duyệt
Nếu được hỗ trợ, có thể sử dụng
hyphens =0 để chỉ định một ký tự gạch nối thay thế sẽ sử dụng ở cuối dòng bị ngắt
none |
manual |
auto
cú pháp
/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;
/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: revert;
hyphens: revert-layer;
hyphens: unset;
Thuộc tính hyphens
được chỉ định là một giá trị từ khóa duy nhất được chọn từ danh sách bên dưới
giá trị
hyphens =2
none |
manual |
auto
Các từ không bị ngắt khi ngắt dòng, ngay cả khi các ký tự bên trong các từ gợi ý các điểm ngắt dòng. Các dòng sẽ chỉ bao bọc ở khoảng trắng
hyphens =3
none |
manual |
auto
Các từ bị ngắt dòng chỉ khi các ký tự bên trong từ gợi ý các cơ hội ngắt dòng. Xem Đề xuất cơ hội ngắt dòng bên dưới để biết chi tiết
hyphens =4
none |
manual |
auto
Trình duyệt có thể tự động ngắt các từ tại các điểm gạch nối thích hợp, tuân theo bất kỳ quy tắc nào mà trình duyệt chọn. Tuy nhiên, cơ hội ngắt dòng được đề xuất [xem Gợi ý cơ hội ngắt dòng bên dưới] sẽ ghi đè lựa chọn điểm ngắt tự động khi xuất hiện
Ghi chú. Hành vi của cài đặt
hyphens =4 tùy thuộc vào ngôn ngữ được gắn thẻ chính xác để chọn quy tắc gạch nối phù hợp. Bạn phải chỉ định một ngôn ngữ sử dụng thuộc tính HTML
none |
manual |
auto
/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;
/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: revert;
hyphens: revert-layer;
hyphens: unset;
2 để đảm bảo rằng dấu gạch nối tự động được áp dụng trong ngôn ngữ đóĐề xuất cơ hội ngắt dòng
Có hai ký tự Unicode được sử dụng để chỉ định thủ công các điểm ngắt dòng tiềm năng trong văn bản
Ký tự gạch nối "cứng" biểu thị cơ hội ngắt dòng có thể nhìn thấy. Ngay cả khi dòng không thực sự bị hỏng tại thời điểm đó, dấu gạch nối vẫn được hiển thị
U+00AD [RẺ]Một gạch nối vô hình, "mềm". Ký tự này không được hiển thị rõ ràng; . Trong HTML, sử dụng
để chèn dấu gạch nối mềm
Ghi chú. Khi phần tử HTML
hyphens =8 dẫn đến ngắt dòng, không có dấu gạch nối nào được thêm vào
none |
manual |
auto
định nghĩa chính thức
Giá trị ban đầu
hyphens =3Áp dụng cho tất cả các phần tửInherityyesGiá trị được tính toán như đã chỉ địnhKiểu hoạt ảnhrời rạc
none |
manual |
auto