Tanda hubung - Trik CSS

Anonim

The hyphenskawalan harta sempang teks dalam unsur-unsur peringkat blok. Anda boleh mengelakkan kata hubung berlaku sama sekali, membiarkannya, atau membiarkannya apabila watak tertentu ada.

Perhatikan bahawa hyphenspeka bahasa. Keupayaannya untuk mencari peluang rehat bergantung pada bahasa, yang ditentukan dalam langatribut elemen induk. Belum semua bahasa disokong, dan sokongan bergantung pada penyemak imbas tertentu.

Sintaks

p ( hyphens: none | manual | auto )

tanda hubung: tidak ada

Kata-kata tidak pernah disisipkan pada kata putus, walaupun watak-watak di dalam kata tersebut menunjukkan ke mana tanda sempang boleh atau harus pergi.

tanda hubung: manual

Kata-kata hanya dipecah pada pemecahan baris di mana terdapat watak-watak di dalam kata yang menunjukkan peluang pemecahan baris. Terdapat dua watak yang menunjukkan peluang pemecahan baris:

  • U+2010(HYPHEN): watak tanda hubung "keras" menunjukkan peluang pemecahan garis yang dapat dilihat. Walaupun garis itu tidak benar-benar putus pada ketika itu, tanda hubung masih diberikan. Secara harfiah "-".
  • U+00AD(SHY): kata hubung yang "tidak lembut" yang tidak kelihatan. Perwatakan ini tidak dapat dilihat; sebaliknya, ia menunjukkan tempat di mana penyemak imbas mungkin memilih untuk memecah perkataan jika perlu. Dalam HTML, anda boleh gunakan -untuk memasukkan tanda hubung lembut.

tanda hubung: automatik

Kata-kata dapat dipecahkan pada titik kata hubung yang sesuai sama ada ditentukan oleh watak kata hubung (lihat di atas) di dalam kata atau ditentukan secara automatik oleh sumber kata hubung yang sesuai dengan bahasa (jika disokong oleh penyemak imbas atau disediakan melalui @hyphenation-resource).

Karakter kata hubung bersyarat di dalam kata, jika ada, lebih mengutamakan sumber automatik ketika menentukan titik kata hubung dalam kata.

tanda hubung: semua

Tidak digunakan lagi, jangan gunakan . Ini hanya dalam spesifikasi sementara untuk ujian.

Demo

Demo di bawah ini mempunyai banyak perenggan dan semuanya diatur hyphens: auto;untuk menunjukkan konsep kata hubung. The langatribut ditetapkan kepada enpada unsur induk.

Lihat Pen ini!

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
88 6 * 10 * 12 * 5.1 *

Mudah Alih / Tablet

Android Chrome Android Firefox Android Safari iOS
88 85 81 4.2-4.3 *

Safari 5+ memerlukan -webkit-, Firefox 6+ memerlukan -moz-, IE 10+ memerlukan -ms-, iOS 4.2+ memerlukan -webkit-.

Penyemak imbas Chrome <55 dan Android sebenarnya menyokong -webkit-hyphens: none, yang merupakan nilai lalai, tetapi tidak ada nilai lain.

Di Firefox dan Internet Explorer, kata hubung automatik hanya berfungsi untuk beberapa bahasa (ditentukan dengan langatribut). Lihat nota ini untuk senarai bahasa yang disokong secara menyeluruh.

Sekiranya anda menulis dokumen berasaskan web yang benar-benar memerlukan kata hubung, anda boleh menggunakan Hyphenator.js yang merupakan perpustakaan berdasarkan kamus yang luas yang secara automatik akan menyuntik tanda hubung lembut dan ruang sifar lebar ke dalam kandungan anda.

Tanpa JavaScript, anda harus bergantung pada kedua hyphens- duanya dan word-wrap:

.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )