Internet terdiri dari konten, konten terdiri dari kata-kata, dan kata-kata bisa sangat, sangat panjang. Dan cepat atau lambat, seorang webmaster dihadapkan pada masalah pemenggalan kata yang panjang. Masalah ini terutama berlaku untuk desain responsif, dan untuk blok konten yang kecil. Jadi bagaimana Anda menangani masalah ini?

Tanda penghubung

Solusi pertama untuk memberi tanda hubung pada kata-kata panjang adalah dengan tanda hubung.

Defisi (-webkit-tanda hubung: auto; -moz-tanda hubung: auto; -ms-tanda hubung: auto; tanda hubung: auto;)

Dukungan Browser: Tanda hubung CSS didukung oleh hampir semua browser modern kecuali Chrome, Opera, Android. Juga, sangat sering tanda hubung disisipkan di tempat-tempat yang secara tata bahasa salah.

Kata putus

Istirahat kata adalah properti CSS yang menentukan apakah akan memecah baris dalam kata-kata.

Obriv-slova (-ms-word-break: break-all; word-break: break-all; word-break: break-word;)

Dukungan browser: Word break didukung di semua browser kecuali Opera Mini dan versi Opera yang lebih lama.

Pembungkus overflow

Solusi selanjutnya adalah menggunakan overflow-wrap.

Obertka-perepolneniya (bungkus kata: kata putus; bungkus luapan: kata putus;)

Dukungan Browser: Didukung di hampir semua browser. Catatan: Beberapa browser memerlukan penggunaan "word-wrap" daripada "overflow-wrap".

Elipsis

Pilihan lain adalah menggunakan elipsis.

Mnogotochiye (luapan: tersembunyi; spasi putih: nowrap; luapan teks: elipsis;)

Dukungan Browser: Didukung oleh semua browser modern.

Ini adalah metode kerja, tetapi jauh dari sempurna.

Solusi akhir: Menggunakan Overflow dan Hyphen Wrapper.

Finalnoye-resheniye (overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto;)

Solusi ini akan memungkinkan browser yang mendukungnya untuk menyisipkan tanda hubung dan, untuk browser yang tidak mendukung, masukkan jeda baris.