Dalam banyak bahasa tertulis, Anda dapat memisahkan baris di antara suku kata serta di antara kata. Hal ini sering dilakukan agar lebih banyak karakter dapat ditempatkan pada baris teks dengan tujuan memiliki lebih sedikit baris di area teks, sehingga menghemat ruang. Dalam bahasa tersebut, jeda ditunjukkan secara visual dengan tanda hubung ('-').
Modul Teks CSS Level 3 menentukan
properti tanda hubung untuk mengontrol kapan tanda hubung ditampilkan kepada pengguna dan bagaimana perilakunya
saat ditampilkan. Mulai versi 55, Chrome menerapkan properti tanda hubung.
Sesuai spesifikasi, properti tanda hubung memiliki tiga nilai: none, manual,
dan auto. Untuk mengilustrasikannya, kita perlu menggunakan tanda hubung lunak (­) seperti dalam
contoh berikut.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
Tanda hubung lembut hanya akan ditampilkan jika terjadi di margin
akhir. Cara tanda hubung ini dirender di Chrome 55 atau yang lebih baru bergantung pada nilai
properti hypens CSS.
-webkit-hyphens: manual;
hyphens: manual;
Menggabungkannya akan memberikan hasil seperti ini:
Perhatikan bahwa tanda hubung lunak tidak terlihat. Dalam semua kasus, jika kata yang berisi tanda hubung lunak sesuai dengan satu baris, tanda hubung tidak akan terlihat. Sekarang, mari kita lihat bagaimana ketiga nilai tanda hubung berperilaku.
Tidak menggunakan
Pada contoh pertama, properti tanda hubung ditetapkan ke none. Hal ini mencegah
tanda hubung lunak ditampilkan. Anda dapat mengonfirmasinya dengan menyesuaikan
ukuran jendela sehingga kata 'elit' tidak akan muat dalam baris teks yang terlihat.
Menggunakan manual
Pada contoh kedua, properti tanda hubung ditetapkan ke manual yang berarti tanda hubung
lunak hanya akan muncul saat margin memisahkan kata 'elit'. Sekali lagi, Anda dapat
mengonfirmasinya dengan menyesuaikan ukuran jendela.
Menggunakan otomatis
Pada contoh ketiga, properti tanda hubung disetel ke auto. Dalam hal ini, tidak
diperlukan tanda hubung lunak karena agen pengguna akan menentukan lokasi tanda hubung
secara otomatis. Jika mengubah ukuran jendela, Anda akan melihat bahwa browser menambahkan tanda hubung
pada contoh ini di tempat yang sama seperti pada contoh kedua, meskipun tidak ada tanda hubung
lunak. Jika terus memperkecil jendela, Anda akan melihat bahwa browser
dapat membagi baris di antara dua suku kata dalam teks.