Tasarım Kodlama

CSS ile Taşan Yazıyı Alt Satıra Atma

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.

CSS ile Taşan Yazıyı Alt Satıra Atma

HTML Kodu:

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.

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.

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