Trong nhiều ngôn ngữ viết, bạn có thể ngắt dòng giữa các âm tiết cũng như giữa các từ. Việc này thường được thực hiện để có thể đặt nhiều ký tự hơn trên một dòng văn bản với mục tiêu có ít dòng hơn trong một vùng văn bản, từ đó tiết kiệm không gian. Trong các ngôn ngữ như vậy, dấu ngắt được biểu thị bằng dấu gạch nối ('-').
Mô-đun văn bản CSS cấp 3 xác định thuộc tính dấu gạch nối để kiểm soát thời điểm hiển thị dấu gạch nối cho người dùng và cách hoạt động của dấu gạch nối khi hiển thị. Kể từ phiên bản 55, Chrome sẽ triển khai thuộc tính dấu gạch nối.
Theo quy cách, thuộc tính dấu gạch nối có ba giá trị: none, manual và auto. Để minh hoạ điều này, chúng ta cần sử dụng dấu gạch nối mềm (­) như trong ví dụ sau.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
Dấu gạch nối mềm chỉ xuất hiện khi xuất hiện ở lề cuối. Cách dấu gạch nối này hiển thị trong Chrome 55 trở lên phụ thuộc vào giá trị của thuộc tính hypens CSS.
-webkit-hyphens: manual;
hyphens: manual;
Khi kết hợp các lớp này, bạn sẽ có kết quả như sau:
Lưu ý rằng dấu gạch nối mềm không hiển thị. Trong mọi trường hợp, khi một từ chứa dấu gạch nối mềm vừa với một dòng, dấu gạch nối sẽ không hiển thị. Bây giờ, hãy cùng xem cách hoạt động của cả ba giá trị dấu gạch nối.
Không sử dụng
Trong ví dụ đầu tiên, thuộc tính dấu gạch nối được đặt thành none. Điều này sẽ ngăn dấu gạch nối mềm hiển thị. Bạn có thể xác nhận điều này bằng cách điều chỉnh kích thước cửa sổ để từ "elit" không vừa với dòng văn bản hiển thị.
Sử dụng hướng dẫn thủ công
Trong ví dụ thứ hai, thuộc tính dấu gạch nối được đặt thành manual, nghĩa là dấu gạch nối mềm sẽ chỉ xuất hiện khi lề ngắt từ "elit". Xin nhắc lại, bạn có thể xác nhận điều này bằng cách điều chỉnh kích thước cửa sổ.
Sử dụng chế độ tự động
Trong ví dụ thứ ba, thuộc tính dấu gạch nối được đặt thành auto. Trong trường hợp này, bạn không cần dấu gạch nối mềm vì tác nhân người dùng sẽ tự động xác định vị trí dấu gạch nối. Nếu đổi kích thước cửa sổ, bạn sẽ thấy trình duyệt xuống dòng ví dụ này ở cùng vị trí như trong ví dụ thứ hai, mặc dù không có dấu gạch nối mềm. Nếu tiếp tục thu nhỏ cửa sổ, bạn sẽ thấy trình duyệt có thể ngắt dòng giữa hai âm tiết bất kỳ trong văn bản.