Dấu gạch nối css: tự động không hoạt động
|
Thuộc tính Show
Đưa ra bản chạy thử ❯ Giá trị mặc định. hướng dẫn sử dụng được kế thừa. vângCó thể hoạt hình. không. Đọc về animatableVersion. Cú pháp CSS3JavaScript. sự vật. Phong cách. dấu gạch nối = "không" Hỗ trợ trình duyệtCác số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính Dấu gạch nối thuộc tính55. 079. 0 Cú pháp CSSgạch nối. không ai. thủ công. Tự động. ban đầu. thừa kế; Giá trị tài sảnGiá trịMô tảDemononeTừ không được gạch nốiDemo ❯manualDefault. Các từ chỉ được gạch nối tại ‐ hoặc (nếu cần)Bản trình diễn ❯tự độngCác từ được gạch nối ở nơi thuật toán đang quyết định (nếu cần)Bản trình diễn ❯initialĐặt thuộc tính này thành giá trị mặc định của nó. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế Thuộc tính HTML Và mặc dù tôi biết rằng thuộc tính này rất quan trọng nhưng tôi không biết rằng nó cũng ảnh hưởng đến cách trình duyệt xử lý các từ dài và dấu gạch nối /* Keyword values */ hyphens: none; hyphens: manual; hyphens: auto; /* Global values */ hyphens: inherit; hyphens: initial; hyphens: revert; hyphens: revert-layer; hyphens: unset; 1 và thuộc tính langNếu bạn đang hiển thị văn bản có các từ dài trong vùng chứa hẹp, bạn có thể gặp phải tình huống tràn văn bản. Những từ dài sẽ thoát ra khỏi thùng chứa của chúng  Nếu bạn nhìn vào các từ tràn và chiều rộng vùng chứa, giải pháp duy nhất là chia các từ thành nhiều phần và thêm dấu gạch nối Thuộc tính CSS Xác định nơi ngắt các từ dài theo cách thủ côngGiá trị mặc định của thuộc tính Cả hai tín hiệu ký tự được sử dụng để tách các từ ra. Thật không may, cách Hãy nghĩ về một trang web bao gồm hàng trăm trang được duy trì bởi nhiều người khác nhau. Dấu gạch ngang sau đó cần được hiển thị ở các vị trí từ khác nhau tùy thuộc vào bố cục đáp ứng. Một từ dài trên thiết bị di động có thể cần gạch nối, trong khi cùng một từ có thể được chấp nhận trong bố cục màn hình lớn. Dấu gạch nối hiển thị mọi lúc sẽ không làm điều đó Và thêm một ký tự vô hình để ngắt các từ dài đúng cách. Tốt. bạn không thể mong đợi các nhà văn và biên tập viên loay hoay với các ký tự được mã hóa HTML vô hình. Điều đó cũng sẽ không hiệu quả Để trình duyệt tự động gạch nối các từ dàiMột cách tiếp cận khác là sử dụng
Sau khi tìm hiểu văn bản có chứa các từ dài, tôi biết được rằng ngôn ngữ tài liệu đóng một vai trò trong cách trình duyệt gạch nối các từ Hãy xem bản trình diễn bên dưới để biết cách thuộc tính Tôi không chắc chắn 100% về cách gạch nối chính xác các từ tiếng Anh, nhưng tôi đoán rằng gạch nối sẽ tốt hơn nếu dùng đúng ngôn ngữ Và bạn đã có, thuộc tính Nếu bạn muốn đọc thêm về gạch nối và thuộc tính Thuộc tính CSS 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ự hyphens =7 (gạch nối mềm) ẩn. hyphens =8. 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 hyphens =9 được chỉ định Quy 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 hyphens =1 phải được sử dụng Ghi 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 cú phápThuộc tính giá trịhyphens =2 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 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 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 lang HTML để đả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òngCó 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 U+2010 (HYPHEN)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 hyphens =7 để 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 định nghĩa chính thứcGiá 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 |
