The hyphenskontrol properti hyphenation teks dalam elemen-elemen tingkat blok. Anda dapat mencegah terjadinya pemenggalan sama sekali, mengizinkannya, atau hanya mengizinkannya jika ada karakter tertentu.
Perhatikan bahwa hyphensbahasa sensitif. Kemampuannya untuk menemukan peluang istirahat bergantung pada bahasa, yang ditentukan dalam langatribut elemen induk. Belum semua bahasa didukung, dan dukungan bergantung pada browser tertentu.
Sintaksis
p ( hyphens: none | manual | auto )tanda hubung: tidak ada
Kata-kata tidak pernah diberi tanda hubung pada jeda baris, meskipun karakter di dalam kata menunjukkan ke mana tanda hubung bisa atau harus diletakkan.
tanda hubung: manual
Kata-kata hanya terputus pada jeda baris di mana ada karakter di dalam kata yang menyarankan peluang jeda baris. Ada dua karakter yang menyarankan peluang jeda baris:
U+2010(HYPHEN): karakter tanda hubung "keras" menunjukkan peluang jeda baris yang terlihat. Meskipun garis tersebut tidak benar-benar terputus pada saat itu, tanda hubung tetap ditampilkan. Secara harfiah berarti “-“.U+00AD(SHY): tanda hubung "lembut" yang tidak terlihat. Karakter ini tidak ditampilkan; sebaliknya, ini menyarankan tempat di mana browser mungkin memilih untuk memecahkan kata jika perlu. Di HTML, Anda dapat menggunakan-untuk menyisipkan tanda hubung halus.
tanda hubung: otomatis
Kata-kata dapat dipecah pada titik tanda hubung yang sesuai baik seperti yang ditentukan oleh karakter tanda hubung (lihat di atas) di dalam kata atau sebagaimana ditentukan secara otomatis oleh sumber tanda penghubung yang sesuai dengan bahasa (jika didukung oleh browser atau disediakan melalui @hyphenation-resource).
Karakter tanda hubung bersyarat di dalam kata, jika ada, lebih diprioritaskan daripada sumber daya otomatis saat menentukan titik penghubung dalam kata tersebut.
tanda hubung: semua
Usang, jangan gunakan . Ini hanya ada di spesifikasi sementara untuk pengujian.
Demo
Demo di bawah ini memiliki banyak paragraf dan semuanya diatur hyphens: auto;untuk mendemonstrasikan konsep tanda hubung. The langatribut diatur ke enpada elemen induk.
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5.1 * |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4.2-4.3 * |
Safari 5+ membutuhkan -webkit-, Firefox 6+ membutuhkan -moz-, IE 10+ membutuhkan -ms-, iOS 4.2+ membutuhkan -webkit-.
Chrome <55 dan browser Android sebenarnya mendukung -webkit-hyphens: none, yang merupakan nilai default, tetapi tidak ada nilai lain.
Di Firefox dan Internet Explorer, tanda hubung otomatis hanya berfungsi untuk beberapa bahasa (ditentukan dengan langatribut). Lihat catatan ini untuk daftar lengkap bahasa yang didukung.
Jika Anda menulis dokumen berbasis web yang benar-benar membutuhkan tanda hubung, Anda dapat menggunakan Hyphenator.js yang merupakan pustaka berdasarkan kamus besar yang secara otomatis akan memasukkan tanda hubung lunak dan spasi kosong ke konten Anda.
Tanpa JavaScript, Anda harus mengandalkan keduanya hyphensdan word-wrap:
.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )