Ada kalanya rentetan teks yang sangat panjang dapat melimpah bekas susun atur.
Sebagai contoh:
Inilah sudu:
overflow-wrap: break-word;memastikan tali panjang akan melilit dan tidak keluar dari bekas. Anda mungkin juga menggunakannyaword-wrapkerana seperti yang disebutkan dalam spesifikasi, mereka benar-benar hanya bergantian nama satu sama lain. Beberapa penyemak imbas menyokong satu dan bukan yang lain. Firefox (diuji v43) hanya menyokongword-wrap. Blink (Chrome v45 yang diuji) akan mengambil salah satu.- Dengan
overflow-wrappenggunaannya sendiri, kata-kata akan hancur di mana sahaja mereka memerlukan. Sekiranya terdapat watak "rehat yang dapat diterima" (seperti tanda hubung harfiah), ia akan pecah di sana, jika tidak, ia hanya melakukan apa yang perlu dilakukan. - Anda mungkin juga menggunakannya
hyphens, kerana ketika itu ia akan cuba menambahkan tanda hubung di mana ia pecah jika penyemak imbas menyokongnya (Blink tidak pada saat menulis, Firefox melakukannya). word-break: break-all;adalah untuk memberitahu penyemak imbas bahawa tidak apa-apa untuk memecahkan perkataan di mana sahaja ia diperlukan. Walaupun ia tetap berlaku, jadi saya tidak pasti dalam kes apa itu 100% diperlukan.
Sekiranya anda ingin menjadi lebih manual dengan tanda hubung, anda boleh mencadangkannya dalam markup anda. Lihat lebih banyak lagi di halaman MDN.
Sokongan penyemak imbas
Untuk word-break:
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 |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Untuk hypens:
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 * |
Untuk overflow-wrap:
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 |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 |
Untuk text-overflow:
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 |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 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 rentetan teks menyentuh bekas:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Perkara yang baik tentang penggunaannya text-overflowialah ia disokong secara universal.
Contoh
Lihat Kata Panjang Kata Hubung Pena oleh CSS-Tricks (@ css-tricks) di CodePen.
Lihat Elips Pen oleh CSS-Tricks (@ css-tricks) di CodePen.
Lihat Pen Writing Out Line Wrapping oleh Chris Coyier (@chriscoyier) di CodePen.
Lebih Banyak Sumber
- Michael Scharnagl: Berurusan dengan kata-kata panjang dalam CSS
- Kenneth Auchenberg: Pembungkus kata / kata hubung menggunakan CSS
- MDN: kata-bungkus, kata putus, tanda hubung
- Spesifikasi: Teks CSS Tahap 3
Untuk kecenderungan SCSS
Ini cenderung menjadi jenis perkara yang anda taburkan ke kod jika diperlukan, jadi mereka membuat @mixins yang 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; )