Dalam banyak bahasa tertulis, Anda dapat memisahkan baris antara suku kata dan di antara kata. Hal ini sering dilakukan sehingga lebih banyak karakter dapat ditempatkan pada baris teks dengan tujuan memiliki lebih sedikit baris dalam area teks, sehingga menghemat ruang. Dalam bahasa ini, jeda ditunjukkan secara visual dengan tanda hubung ('-').
Modul Teks CSS Level 3 menetapkan properti tanda hubung untuk mengontrol kapan tanda hubung ditampilkan kepada pengguna dan perilakunya saat ditampilkan. Mulai versi 55, Chrome menerapkan properti tanda hubung.
Sesuai spesifikasi, properti tanda hubung memiliki tiga nilai: none
, manual
, dan auto
. Untuk menggambarkan hal ini, kita perlu menggunakan tanda hubung halus (­
) seperti dalam
contoh berikut.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
Tanda hubung halus adalah tanda hubung yang 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;
Menggabungkan semua ini akan memberikan hasil seperti ini:
Perhatikan bahwa tanda hubung halus tidak terlihat. Di semua kasus, jika kata yang berisi tanda hubung halus sesuai di satu baris, tanda hubung tersebut tidak akan terlihat. Sekarang, mari kita lihat bagaimana ketiga nilai tanda hubung berperilaku.
Tidak menggunakan
Pada contoh pertama, properti tanda hubung ditetapkan ke none
. Tindakan ini akan mencegah
tanda hubung halus ditampilkan. Anda dapat mengonfirmasi hal ini dengan menyesuaikan
ukuran jendela sehingga kata 'elit' tidak akan pas di baris teks yang terlihat.
Menggunakan manual
Pada contoh kedua, properti tanda hubung ditetapkan ke manual
yang berarti tanda hubung lembut hanya akan muncul jika margin memecah kata 'elit'. Sekali lagi, Anda dapat
mengonfirmasi hal ini dengan menyesuaikan ukuran jendela.
Menggunakan mode otomatis
Pada contoh ketiga, properti tanda hubung ditetapkan ke auto
. Dalam hal ini, tanda hubung halus tidak diperlukan
karena agen pengguna akan menentukan lokasi tanda hubung
secara otomatis. Jika mengubah ukuran jendela, Anda akan melihat bahwa browser menggunakan tanda hubung
di contoh ini di tempat yang sama seperti di kedua, meskipun tidak ada
tanda hubung halus. Jika jendela terus dikecilkan, Anda akan melihat bahwa browser
mampu memisahkan baris antara dua suku kata dalam teks.