Satır sonuna sığmayan kelimeler

Question

Satır sonuna sığmayan uzun bir kelime yazdığımda, kelime ya satırın sonuna sıkışıyor ya da taşıyor. Bu durumda kelimenin doğru bir şekilde nasıl bölüneceğini ve kalan kısmın alt satıra nasıl geçeceğini bilmiyorum. Ayrıca bu işlemi yaparken okunabilirliğin bozulmaması için nelere dikkat etmem gerekiyor?

Answer 1

📝 Satır Sonuna Sığmayan Kelimeler

Bir metin düzenlerken veya bir web sayfası tasarlarken, uzun kelimeler veya ifadeler satır sonuna geldiğinde bazen taşma problemi yaşanır. Bu durumda kelime ya bir sonraki satıra tamamen kayar ya da satırı taşırarak okunabilirliği bozar. Bu konu, bu tür kelimelerin nasıl kontrol edileceği ile ilgilidir.

🎯 Sorun Nedir?

Uzun bir URL, teknik bir terim veya bileşik bir kelime (örneğin, "elektroensefalografi") yazdığınızı düşünün. Eğer bu kelime bulunduğu satıra sığmazsa, tarayıcı varsayılan olarak onu bir bütün halinde bir sonraki satıra kaydırır. Bu, genellikle satırın sonunda büyük bir boşluk oluşmasına neden olur ve bu da metnin görsel düzenini bozabilir.

🛠️ Çözüm Yöntemleri

Bu sorunu çözmek için CSS'de kullanabileceğimiz bazı özellikler bulunmaktadır.

• ✅ overflow-wrap: break-word;
  Bu özellik, bir kelimenin taşmasını engellemek için, kelimenin herhangi bir harfinden itibaren satır sonunda bölünmesine izin verir. Bu, özellikle uzun ve aralıksız diziler (URL'ler gibi) için çok kullanışlıdır.
• ✅ word-break: break-all;
  Bu özellik daha agresiftir. Bir kelimenin satıra sığmaması durumunda, harfler arasında ayrım gözetmeksizin, ihtiyaç duyulan her yerde satırı böler. Genellikle Asya dilleri gibi boşluksuz yazılan diller için tasarlanmış olsa da, acil durumlarda kullanılabilir.
• ✅ hyphens: auto;
  Bu, en zarif çözümlerden biridir. Tarayıcının, dilin dilbilgisi kurallarına uygun olarak kelimeleri tire (-) ile bölmesine olanak tanır. Ancak, tarayıcı desteği ve dil ayarı (lang özelliği) doğru şekilde yapılandırılmış olmalıdır.

💻 Pratik Örnek

Aşağıdaki CSS kodunu, sorun yaşadığınız metni içeren HTML etiketine uygulayabilirsiniz:

p {
  overflow-wrap: break-word;
  /* Veya */
  word-break: break-word;
  /* Veya tireleme için */
  hyphens: auto;
}

📌 Hangisini Kullanmalıyım?

• ➡️ Genel ve güvenli bir çözüm için: overflow-wrap: break-word;
• ➡️ Daha kesin bir bölme istiyorsanız: word-break: break-all;
• ➡️ Profesyonel ve okunabilir bir görünüm için (tarayıcı destekliyorsa): hyphens: auto;

Sonuç: Satır sonuna sığmayan kelimeler, web tasarımında sık karşılaşılan bir durumdur. Doğru CSS özelliğini seçerek hem metnin okunabilirliğini koruyabilir hem de sayfa düzeninizin bozulmasını engelleyebilirsiniz. 🎉