Gerçekten uzun bir metin dizisinin bir düzen kapsayıcısından taşabileceği zamanlar vardır.
Örneğin:
İşte kepçe:
overflow-wrap: break-word;uzun ipin sarılacağından ve kabın dışına çıkmayacağından emin olur. Sen de kullanabilirsinword-wrap, çünkü şartnamede dediği gibi, bunlar tam anlamıyla birbirlerinin alternatif isimleridir. Bazı tarayıcılar birini destekler, diğerini desteklemez. Firefox (test edilmiş v43) yalnızcaword-wrap. Blink (test edilen Chrome v45) ikisinden birini alacaktır.- Tek
overflow-wrapbaşına kullanımda, kelimeler ihtiyaç duydukları her yerde kırılır. "Kabul edilebilir bir kırılma" karakteri varsa (örneğin, düz çizgi gibi), orada kırılır, aksi takdirde sadece yapması gerekeni yapar. - Siz de kullanabilirsiniz
hyphens, çünkü o zaman, tarayıcı destekliyorsa, kırıldığı yere zevkli bir şekilde bir tire eklemeye çalışacaktır (Blink, yazarken bunu yapmaz, Firefox yapar). word-break: break-all;tarayıcıya kelimeyi ihtiyaç duyduğu yerde kırmanın uygun olduğunu söylemektir. Yine de öyle yapsa da, hangi durumlarda% 100 gerekli olduğundan emin değilim.
Kısa çizgilerle daha manuel olmak istiyorsanız, bunları işaretlemenizde önerebilirsiniz. MDN sayfasında daha fazlasını görün.
Tarayıcı desteği
Şunun için word-break:
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 44 | 15 | 5.5 | 12 | 9 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Şunun için hypens:
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5.1 * |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4.2-4.3 * |
Şunun için overflow-wrap:
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 |
Şunun için text-overflow:
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Ellipsis ile Taşmayı Önleme
Dikkate alınması gereken başka bir yaklaşım, metni tamamen kesmek ve metin dizesinin kaba çarptığı noktalara elipsler eklemektir:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )Kullanmanın bu güzel yanı text-overflowevrensel olarak desteklenmesidir.
Örnekler
CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem Heceleme Uzun Kelimeleri görün.
CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem Ellipses'e bakın.
CodePen'de Chris Coyier (@chriscoyier) tarafından yazılan Pen Figuring Out Line Wrapping'e bakın.
Daha fazla kaynak
- Michael Scharnagl: CSS'de uzun kelimelerle başa çıkmak
- Kenneth Auchenberg: CSS kullanarak kelime kaydırma / tireleme
- MDN: sözcük kaydırma, sözcük sonu, kısa çizgiler
- Spec: CSS Metin Düzey 3
SCSS eğimli için
Bunlar, ihtiyaç duyulan yerlerde koda serpiştirdiğiniz türden şeyler olma eğilimindedir, bu nedenle güzel @mixins oluştururlar:
@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; )