CSS'deki overflow-wrapözellik, tarayıcının hedeflenen öğenin içindeki bir metin satırını, aksi takdirde kırılmaz bir yerde birden çok satıra bölebileceğini belirtmenize olanak tanır. Bu, taşma nedeniyle düzen sorunlarına neden olan alışılmadık derecede uzun bir metin dizisini önlemeye yardımcı olur.
.example ( overflow-wrap: break-word; )Değerler
normal: varsayılan. Tarayıcı, normal satır kırma kurallarına göre satırları kesecektir. Sözcükler veya bölünmemiş dizeler, kapsayıcıdan taşsalar bile kırılmazlar.break-word: kapsayıcılarına sığamayacak kadar büyük olan sözcükler veya karakter dizileri, satır kesmeye zorlamak için rastgele bir yerde kırılır.hyphensÖzellik kullanılsa bile kısa çizgi karakteri eklenmeyecektir .inherit: hedeflenen öğeoverflow-wrap, en yakın üst öğesinde tanımlanan özelliğin değerini devralmalıdır .
Aşağıdaki demo, normalve arasında geçiş yapmanıza izin veren bir geçiş düğmesine sahiptir break-word.
CodePen'de Louis Lazaris (@impressivewebs) tarafından hazırlanan Pen overflow-wrap / word-wrap demosuna bakın.
overflow-wrapÇözülmeye çalışılan sorunu göstermek için demo, nispeten küçük bir kap içinde alışılmadık derecede uzun bir kelime kullanır. Açtığınızda break-word, kelime birden çok kelimeymiş gibi, mevcut az miktarda alanı barındıracak şekilde bölünür.
Bölünemez boşluk karakterlerinden oluşan bir dizi ( ) aynı şekilde ele alınır ve uygun bir noktada kesilir.
overflow-wrapdenetlenmemiş kullanıcı tarafından oluşturulmuş içerik barındıran öğelere (yorum bölümleri gibi) uygulandığında kullanışlıdır. Bu, uzun URL'lerin ve diğer kesintisiz metin dizilerinin (örneğin vandalizm) bir web sayfasının düzenini bozmasını önleyebilir.
word-breakMülkiyetle Benzerlikler
overflow-wrapve word-breakçok benzer şekilde davranır ve benzer sorunları çözmek için kullanılabilir. CSS spesifikasyonunda açıklandığı gibi, farkın temel bir özeti şöyledir:
overflow-wrapgenellikle, bir kabın dışına akan metin nedeniyle bozuk düzenlere neden olan uzun dizelerle ilgili sorunları önlemek için kullanılır.word-breakÇince, Japonca ve Korece (CJK) gibi dillerle genellikle ilişkilendirilen harfler arasındaki yumuşak sarma fırsatlarını belirtir.
word-breakCJK içeriğinde nasıl kullanılabileceğine dair örnekleri açıkladıktan sonra , teknik özellik şöyle der: "Yalnızca taşma durumunda ek kesinti fırsatlarını etkinleştirmek için, bkz. overflow-wrap".
Bundan yola word-breakçıkarak, belirli kelime kırma kuralları gerektiren ve İngilizce içeriğin arasına serpiştirilebilecek İngilizce olmayan içerikle en iyi kullanıldığını ve overflow-wrapkullanılan dilden bağımsız olarak uzun dizelerden kaynaklanan bozuk düzenleri önlemek için kullanılması gerektiğini tahmin edebiliriz. .
Tarihi word-wrapMülk
overflow-wrapselefi olan word-wrapözelliğin standart adıdır . word-wrapbaşlangıçta, bir standart olmamasına rağmen sonunda tüm tarayıcılarda desteklenen, yalnızca Internet Explorer'a özgü bir özellikti.
word-wrapaynı değerleri kabul eder ve overflow-wrapaynı şekilde davranır. Spesifikasyona göre, tarayıcılar " mülkün bir kısaltmasıymış gibi " mülk word-wrapiçin alternatif bir ad olarak davranmalıdır ". Ayrıca, tüm kullanıcı aracılarının eski nedenlerden dolayı süresiz olarak desteklemesi gerekir .overflow-wrapoverflow-wrapword-wrap
Her ikisi de overflow-wrapve word-wrapdoğrulayıcı CSS3 veya üstü (şu anda varsayılan) test etmeye ayarlandığı sürece CSS doğrulamasını geçecektir.
İlişkili
- kelime arası
- tire
- Beyaz boşluk
- Uzun Kelimeleri ve URL'leri Yönetme
Daha fazla bilgi
- Kelime Kaydırma: Her Tarayıcıda Çalışan CSS3 Özelliği
- W3C'de Taşma Sarma
- Stack Overflow üzerine
word-breakvs.overflow-wrap
Tarayıcı Desteği
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 |
Yukarıda belirtilen "kısmi" destek, daha eski tarayıcıların desteklediği word-wrapancak desteklememesinden kaynaklanmaktadır overflow-wrap. Her ikisinin de kullanılması geriye dönük uyumluluğu sağlayabilir.
Editörün W3C spesifikasyonunun taslak sürümü break-spaces, "korunmuş" beyaz boşluk karakterleri dizileriyle ilgilenen yeni bir değer içerir . Bu özellik için bilinen bir tarayıcı desteği yoktur ve spesifikasyonun çalışma taslak sürümüne dahil edilmemiştir.