Menangani Kata-kata Panjang dan URL (Memaksa Jeda, Tanda Hubung, Elipsis, dll) - Trik CSS

Anonim

Ada kalanya string teks yang sangat panjang dapat meluap dari wadah tata letak.

Sebagai contoh:

Inilah sendoknya:

  • overflow-wrap: break-word;pastikan tali panjang akan membungkus dan tidak keluar dari wadah. Anda mungkin juga menggunakan word-wrapkarena seperti yang dikatakan spesifikasi, mereka secara harfiah hanya nama alternatif untuk satu sama lain. Beberapa browser mendukung yang satu dan tidak mendukung yang lain. Firefox (diuji v43) hanya mendukung word-wrap. Blink (diuji Chrome v45) akan mengambil salah satunya.
  • Dengan overflow-wrapdigunakan dengan sendirinya, kata-kata akan pecah di mana pun mereka perlu. Jika ada karakter "putus yang dapat diterima" (seperti tanda hubung literal, misalnya), itu akan rusak di sana, jika tidak ia hanya melakukan apa yang perlu dilakukan.
  • Anda sebaiknya juga menggunakannya hyphens, karena akan mencoba menambahkan tanda hubung dengan selera tinggi di tempat yang rusak jika browser mendukungnya (Blink tidak pada saat penulisan, Firefox melakukannya).
  • word-break: break-all;adalah memberi tahu browser bahwa tidak apa-apa memecah kata di mana pun diperlukan. Meskipun agak melakukan itu jadi saya tidak yakin dalam kasus apa itu 100% perlu.

Jika Anda ingin lebih manual dengan tanda hubung, Anda dapat menyarankannya di markup Anda. Lihat lebih lanjut di halaman MDN.

Dukungan browser

Untuk word-break:

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
44 15 5.5 12 9

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 9.0-9.2

Untuk hypens:

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 *

Untuk overflow-wrap:

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
23 49 11 18 6.1

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 7.0-7.1

Untuk text-overflow:

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
4 7 6 12 3.1

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

Mencegah Overflow dengan Ellipsis

Pendekatan lain yang perlu dipertimbangkan adalah memotong teks sama sekali dan menambahkan elips di mana string teks mengenai wadah:

.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )

Hal yang menyenangkan tentang penggunaan text-overflowini adalah bahwa itu didukung secara universal.

Contoh

Lihat Pena Hyphenate Long Words oleh CSS-Tricks (@ css-trick) di CodePen.

Lihat Pen Ellipses oleh CSS-Tricks (@ css-trick) di CodePen.

Lihat Pen Figuring Out Line Wrapping oleh Chris Coyier (@chriscoyier) di CodePen.

Sumber Daya Lainnya

  • Michael Scharnagl: Berurusan dengan kata-kata panjang di CSS
  • Kenneth Auchenberg: Pembungkusan kata / tanda hubung menggunakan CSS
  • MDN: word-wrap, word-break, tanda hubung
  • Spec: Teks CSS Level 3

Untuk yang cenderung SCSS

Ini cenderung menjadi jenis hal yang Anda masukkan ke dalam kode jika diperlukan, sehingga membuat @mixins bagus:

@mixin word-wrap() ( overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; )
@mixin ellipsis() ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )