Quản lý dấu gạch nối với CSS

Joe Medley
Joe Medley

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 giảm số dòng trong một vùng văn bản, từ đó tiết kiệm không gian. Trong những ngôn ngữ như vậy, điểm ngắt được biểu thị trực quan 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 người dùng nhìn thấy dấu gạch nối cũng như hành vi của dấu gạch nối khi xuất hiện. Kể từ phiên bản 55, Chrome sẽ triển khai thuộc tính dấu gạch nối. Theo thông số kỹ thuật, 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 là dấu gạch nối sẽ 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 của CSS.

-webkit-hyphens: manual;
hyphens: manual;

Kết hợp các toán tử này sẽ cho ra một kết quả như sau:

Ảnh chụp màn hình một dòng

Lưu ý rằng dấu gạch nối mềm sẽ không xuất hiện. Trong mọi trường hợp, khi một từ có chứa dấu gạch nối mềm nằm vừa trên một dòng, dấu gạch nối sẽ không xuất hiện. Bây giờ, hãy xem cả ba giá trị của dấu gạch nối hoạt động như thế nào.

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. Thao tác này sẽ ngăn không cho dấu gạch nối mềm xuất hiện. 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ị.

Google ipsum dolor sit amet, consectetur adipiscing elit.

Sử dụng 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ổ.

Google ipsum dolor sit amet, consectetur adipiscing elit.

Sử dụng 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ùng 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í của 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 gạch nối ví dụ này ở cùng một 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.

Google ipsum dolor sit amet, consectetur adipiscing elit.