Div yada sınırlandırılmış bir paragraf alanında yazıların alanın dışına taştığını görmüşsünüzdür. Taşan bu yazıları CSS kullanarak alt satıra atabiliriz. Yazıyı alt satıra atmak için CSS word-wrap ve overflow-wrap özelliklerini kullanabilirsiniz.
İlginizi çekebilir: CSS ile taşan yazıya üç nokta (…) ekleme
Örneğimiz için bazı kelimeleri uzun bir şekilde yazdık ve yazının belirlenen alandan taşmasını sağladık.
HTML Kodu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <style> .kutu{ width: 200px; border:1px solid red; padding:10px; } </style> <html> <body> <div class="kutu"> <p>Loremipsumdolorsitametconsecteturadipisicing elit. Similique, nostrum? Est at ipsam expedita deserunt? Isteofficiisrepellataliquideadictanequeidiure laudantium repellendus! Dolor autem minima atque?</p> </div> </body> </html> |
Uzun Kelimeleri Bölme
Kutunun sabit bir boyutta olması gerekiyorsa veya uzun kelimelerin taşmamasını sağlamak istiyorsanız, overflow-wrap özelliği yardımcı olabilir. Bu özellik, bir satıra tek başına sığmayacak kadar uzun olduğunda bir kelimeyi kesecektir.
Yukarıdaki örneğe overflow-wrap özelliğini uygulayalım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <style> .kutu{ width: 200px; border:1px solid red; padding:10px; overflow-wrap: break-word; } </style> <html> <body> <div class="kutu"> <p>Loremipsumdolorsitametconsecteturadipisicing elit. Similique, nostrum? Est at ipsam expedita deserunt? Isteofficiisrepellataliquideadictanequeidiure laudantium repellendus! Dolor autem minima atque?</p> </div> </body> </html> |
Yukarıdaki kodda dikkat ederseniz overflow-wrap: break-word; yapılarak yazının sığmayan kısmını bir alt satıra geçmesi sağlanmıştır.
Çıktı:
Word-Wrap ile Bir Alt Satıra Geçirme
Yukarıdaki örneğe benzer şekilde word-wrap özelliğini kullanarak da yazıyı bir alt satıra geçirmek mümkündür.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <style> .kutu{ width: 200px; border:1px solid red; padding:10px; word-wrap:break-word; } </style> <html> <body> <div class="kutu"> <p>Loremipsumdolorsitametconsecteturadipisicing elit. Similique, nostrum? Est at ipsam expedita deserunt? Isteofficiisrepellataliquideadictanequeidiure laudantium repellendus! Dolor autem minima atque?</p> </div> </body> </html> |
Bu kodunda ekran çıktısı aynı olacaktır.
word-wrap ile overflow-wrap arasındaki fark
İki sözcük kesme çok benzer şekilde davranır ve benzer sorunları çözmek için kullanılabilir. CSS spesifikasyonunda açıklandığı gibi, farkın temel bir özeti:
- overflow-wrap genellikle, bir kapsayıcını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 yaygın olarak ilişkilendirilen harfler arasındaki yumuşak kaydırma fırsatlarını belirtir.
word-break özelliği
Yukarıdaki iki özelliğe ek olarak word-break: break-all; yaparak da yazıyı bir alt satıra getirmek mümkündür.
overflow-wrap özelliği, standart olmayan sözcük kaydırma özelliğiyle aynı şekilde hareket eder. Word-wrap özelliği artık tarayıcılar tarafından standart özelliğin bir diğer adı olarak ele alınmaktadır.
Denemek için alternatif bir özellik word-break kullanımıdır. Bu özellik, sözcüğü taştığı noktada kesecektir. Sözcüğü yeni bir satıra yerleştirmek, kırılmadan görüntülenmesine izin verecekse, bir kesintiye neden olur.
Bu sonraki örnekte, aynı metin dizesindeki iki özellik arasındaki farkı karşılaştırabilirsiniz.
Kaynak:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text
1 Yorum