Tiesto

Tiesto

WFN Üye
Konular
635
Mesajlar
635
Çözüm
0
Ticaret Puanı
0
Üyelik
24 Gün
Konum
Antalya
Web Sitesi
Var
Alanı
Domain Uzmanı
1/1
Konu sahibi
Yazının kutudan taşmasını önlemek için önce metnin satıra bölünebilmesini sağlayın: uzun ve kesintisiz metinlerde overflow-wrap: anywhere; veya overflow-wrap: break-word; kullanın. Taşmanın nedeni tek satırda kalma, sabit genişlik ya da taşan içeriği gizleme isteğiyse buna göre white-space, word-break, overflow ve text-overflow özelliklerini birlikte ayarlayın. Çoğu normal metin için güvenli başlangıç aşağıdaki kuraldır:

CSS: 
.metin {
    max-width: 100%;
    overflow-wrap: anywhere;
}

Bu kural, özellikle uzun URL, dosya adı, e-posta adresi veya boşluk içermeyen başka bir metin parçası kapsayıcıyı aşarsa metnin uygun bir yerden bölünmesini sağlar. max-width: 100%; ise öğenin bulunduğu alanı aşmamasına yardımcı olur; ancak tek başına uzun bir kelimeyi satıra bölmez.

Taşmanın nedenini ayırın​


Önce taşan öğenin genişliğini ve metnin satır davranışını kontrol edin. Kapsayıcıda white-space: nowrap; varsa metin satır değiştirmez. Sabit genişlik verilmiş bir öğe, dar ekranlarda bulunduğu alandan büyük kalabilir. Uzun ve boşluksuz bir ifade ise normal satır kırma kurallarıyla bölünemeyebilir.

Normal paragraf, başlık ve kart metinlerinde şu yaklaşım genellikle yeterlidir:

CSS: 
p,
h1,
h2,
h3,
.card {
    max-width: 100%;
    overflow-wrap: break-word;
}

break-word, uzun metin gerektiğinde satır sınırında kırılmasına izin verir. Daha agresif bir davranış istiyorsanız anywhere kullanabilirsiniz. anywhere, tarayıcının metni daha fazla noktada bölmesine izin verdiği için çok uzun URL ve kimlik dizilerinde taşmayı önlemede daha etkilidir; buna karşılık kelime bütünlüğü daha erken bozulabilir.

Kullanılacak CSS özelliğini seçin​


Her özellik aynı sorunu çözmez. overflow-wrap uzun kelime veya URL gibi ifadelerin gerektiğinde bölünmesini sağlar. word-break ise karakterler arasındaki bölünme davranışını daha sert biçimde değiştirir. Bu nedenle normal Türkçe metinlerde ilk tercih olarak word-break: break-all; kullanmak iyi bir seçim değildir; kelimeleri okunması zor noktalardan bölebilir.
İhtiyaçUygun özellikSonuç
Uzun URL veya boşluksuz metin taşmasınoverflow-wrap: anywhere;Metin gerektiğinde daha fazla noktadan bölünür
Uzun kelime gerektiğinde satıra sığsınoverflow-wrap: break-word;Kelime, taşmayı önlemek için satır sınırında kırılabilir
Metin tek satırda kalsınwhite-space: nowrap;Satır kırılmaz; taşma ayrıca yönetilmelidir
Tek satırın sonunu üç noktayla gösteroverflow: hidden; text-overflow: ellipsis;Taşan bölüm gizlenir ve genellikle üç nokta gösterilir
Karakterler arasında daha sert kırmaword-break: break-all;Gerekirse kelimeler karakter sınırlarından bölünür
Tablodaki son iki yaklaşım, metni gerçekten görünür tutmak yerine taşan kısmı gizleyebilir veya okunabilirliği azaltabilir. Bu yüzden açıklama, makale ve kullanıcı mesajlarında önce overflow-wrap ile satıra sığdırmayı deneyin.

Tek satırlık metni üç noktayla sınırlama​


Kart başlığı, menü öğesi veya kısa etiket tek satırda kalmalı ve fazla kısmı göstermemeliyse üç özellik birlikte kullanılır. Öğenin genişliği belirli olmalı, taşan bölüm gizlenmeli ve metin taşması üç noktayla belirtilmelidir:

CSS: 
.kart-basligi {
    width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Bu örnekte 240 pikselden uzun başlık tamamen satıra bölünmez; görünmeyen bölümün yerine üç nokta gösterilir. Bu yöntem metnin tamamını korumaz. Kullanıcı metnin tamamını okuyabilmeli ise white-space: normal; ve overflow-wrap: break-word; kullanarak birden fazla satıra izin verin.

Flex ve Grid içinde oluşan taşmayı düzeltme​


Taşma bir flex veya grid öğesinde meydana geliyorsa yalnızca metne kural vermek yeterli olmayabilir. Flex öğeleri varsayılan olarak içeriklerinin doğal genişliğini korumaya çalışabilir. Bu durumda metni taşıyan doğrudan alt öğeye min-width: 0; ekleyin:

CSS: 
.satir {
    display: flex;
    max-width: 100%;
}

.satir .icerik {
    min-width: 0;
    overflow-wrap: anywhere;
}

min-width: 0;, flex öğesinin içeriği kadar genişlemek zorunda kalmasını önler. Ardından overflow-wrap, uzun metnin kalan genişliğe göre bölünmesini sağlar. Grid düzeninde de benzer bir sorun varsa sütunun minimum genişliğini içeriğe göre sınırlamak için örneğin minmax(0, 1fr) kullanılabilir:

CSS: 
.duzen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
}

Uygulama sonrası kontrol​


CSS kuralını taşan metnin bulunduğu öğeye veya onu kapsayan uygun bir sınıfa ekledikten sonra sayfayı dar bir ekran genişliğinde kontrol edin. Metin yeni satıra bölünüyorsa sorun çözülmüştür. Yalnız tek satırlık başlıkta üç nokta görünüyorsa bu, taşan kısmın gizlendiği anlamına gelir; metnin tamamının gösterildiğini kanıtlamaz.

Taşma devam ediyorsa şu sırayla ilerleyin:
  1. Öğede veya üst kapsayıcıda white-space: nowrap; bulunup bulunmadığını kontrol edin. Normal satır kırılması isteniyorsa white-space: normal; kullanın.
  2. Flex düzenindeyse taşan doğrudan alt öğeye min-width: 0; ekleyin.
  3. Uzun URL veya boşluksuz dizi varsa overflow-wrap: anywhere; deneyin.
  4. Taşmanın kaynağının metin değil, geniş bir görsel ya da başka bir alt öğe olduğunu kontrol edin; bu durumda metin kuralını değiştirmek sorunu çözmez.
Amaç metni okunabilir biçimde göstermekse temel çözüm overflow-wrap: break-word; veya uzun, boşluksuz diziler için overflow-wrap: anywhere; kullanmaktır. Amaç sınırlı alanlı bir arayüzde kısa önizleme göstermekse white-space: nowrap; overflow: hidden; text-overflow: ellipsis; üçlüsünü tercih edin.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)