- Konu sahibi
- #1
CSS
Örneğin sabit yüksekliği olan bir kutuda metin miktarı arttığında içerik kutunun altından dışarı taşar. Genişliği sınırlı bir kutuda uzun bir URL veya boşluksuz kelime bulunduğunda ise yatay taşma oluşabilir.
Bu örnekte içerik kutuya sığarsa kaydırma çubuğu gerekmez. İçerik taşarsa tarayıcı, taşan bölüme ulaşmak için uygun kaydırma mekanizmasını gösterir.
Pratikte genel amaçlı kutular için ilk tercih çoğunlukla
Bir sayfa mobil ekranda sağa doğru taşıyorsa sorunun kaynağı uzun metin, sabit genişlik, geniş bir tablo, resim veya flex öğesi olabilir. Tüm sayfaya doğrudan
Uzun kelime ve URL'ler için metnin bölünebilmesini sağlayabilirsiniz:
Yatay kaydırılması gereken tablo veya kod bloğu için taşmayı ilgili kapsayıcıda sınırlandırın:
Her sorunda
Sadece yüksekliği sınırlamak: İçerik uzunsa
Yatay ve dikey eksenleri karıştırmak: Yalnızca yatay taşmayı çözmek istiyorsanız
Hayır.
Gerekli tarayıcılarda kapsayıcıyı
Resmin kutudan taşmaması için çoğu durumda
overflow, bir elementin içeriği kendisine ayrılan genişlik veya yüksekliğe sığmadığında taşan kısmın nasıl davranacağını belirleyen özelliktir. İçerik kutunun dışına taşabilir, kırpılabilir veya kaydırma çubuğu ile erişilebilir hâle getirilebilir. Varsayılan değer visible olduğu için taşan içerik normalde gizlenmez.Örneğin sabit yüksekliği olan bir kutuda metin miktarı arttığında içerik kutunun altından dışarı taşar. Genişliği sınırlı bir kutuda uzun bir URL veya boşluksuz kelime bulunduğunda ise yatay taşma oluşabilir.
Kod:
<style>
.kutu {
box-sizing: border-box;
width: 240px;
max-width: 100%;
height: 100px;
border: 1px solid #999;
border-radius: 4px;
overflow: auto;
}
</style>
<div class="kutu" tabindex="0" role="region" aria-label="Kaydırılabilir örnek metin">
<p>İlk paragraf: Kutunun yüksekliği sınırlıdır.</p>
<p>İkinci paragraf: Bu metin içerik yüksekliğini artırır.</p>
<p>Üçüncü paragraf: Kutuyu odaklayıp klavyeyle de kaydırmayı deneyin.</p>
</div>Bu örnekte içerik kutuya sığarsa kaydırma çubuğu gerekmez. İçerik taşarsa tarayıcı, taşan bölüme ulaşmak için uygun kaydırma mekanizmasını gösterir.
overflow değerleri nasıl çalışır?
overflow hem yatay hem dikey taşmayı birlikte kontrol eder. Yalnızca bir değer yazıldığında overflow-x ve overflow-y için aynı davranış uygulanır. Eksenleri ayrı yönetmek için iki değer veya ayrı özellikler kullanılabilir.| Değer | Davranış | Ne zaman kullanılmalı? |
|---|---|---|
visible | Taşan içerik görünür kalır. | İçeriğin kesilmesi istenmiyorsa |
hidden | Taşan içerik kırpılır, kaydırma çubuğu gösterilmez. | Dekoratif taşmalar veya kontrollü kırpma için |
auto | Yalnızca gerektiğinde kaydırma imkânı sağlar. | Değişken içerikli kutular için |
scroll | Kaydırma alanı oluşturur; çubuklar ihtiyaç olmasa da gösterilebilir. | Sabit kaydırma alanı beklenen durumlar için |
clip | İçeriği kırpar; element kaydırılabilir bir alan oluşturmaz. | Taşan içeriğin tamamen görünmez olması ve kaydırılmaması gerektiğinde |
auto olur. Böylece kısa içerikte gereksiz kaydırma çubuğu görünmez, uzun içerikte ise içerik tamamen kaybolmaz. hidden kaydırma çubuğu sunmaz; ancak JavaScript veya içerideki bir öğeye odaklanma içeriği kaydırabilir. clip programlı kaydırmaya da izin vermez. Bu ayrımı bir gizlilik veya erişim yetkisi kontrolü sanmayın.Yatay taşmayı düzeltme
Bir sayfa mobil ekranda sağa doğru taşıyorsa sorunun kaynağı uzun metin, sabit genişlik, geniş bir tablo, resim veya flex öğesi olabilir. Tüm sayfaya doğrudan
overflow-x: hidden vermek yerine önce taşan elementi bulmak daha doğrudur; aksi hâlde kullanıcıya görünmeyen içerik veya çalışmayan yatay etkileşim oluşturabilirsiniz.Uzun kelime ve URL'ler için metnin bölünebilmesini sağlayabilirsiniz:
Kod:
.metin {
overflow-wrap: anywhere;
}Yatay kaydırılması gereken tablo veya kod bloğu için taşmayı ilgili kapsayıcıda sınırlandırın:
Kod:
.kaydirilabilir {
max-width: 100%;
overflow-x: auto;
}Uygulama ve kontrol adımları
- Taşmanın yatay mı dikey mi olduğunu tarayıcının geliştirici araçlarında kontrol edin.
- Taşan içeriği taşıyan gerçek elementi bulun; yalnızca
bodyveyahtmlüzerinde gizleme uygulamayın. - İçeriğin tamamı kullanıcı tarafından görülmeli ise ilgili kapsayıcıya
overflow: autoverin. - İçerik dekoratif olarak dışarı taşabiliyor ancak kesilmesi sorun oluşturmuyorsa
overflow: hiddenkullanın. - Uzun kelime, URL veya kod satırı taşmasını çözmek için
overflow-wrap, tablo için yatayautodavranışını değerlendirin. - Dar ekran genişliklerinde yeniden test edin ve klavye ile erişilemeyen gizli içerik oluşmadığını kontrol edin.
hidden seçimi muhtemelen yanlıştır.Sık yapılan hatalar
Her sorunda
overflow: hidden kullanmak: Bu yöntem taşmayı gizler ancak asıl genişlik veya boyut problemini çözmez. Özellikle metin, form alanı ve odaklanan bağlantılar görünmez olabilir.Sadece yüksekliği sınırlamak: İçerik uzunsa
height ile birlikte uygun bir overflow davranışı tanımlanmazsa metin komşu içeriğin üzerine taşabilir.Yatay ve dikey eksenleri karıştırmak: Yalnızca yatay taşmayı çözmek istiyorsanız
overflow-x kullanın. Dikey davranışı istemeden değiştirmemek için iki ekseni birlikte düşünün.Sık sorulan sorular
overflow ile text-overflow aynı şey midir?
Hayır.
overflow kutunun taşan içeriği nasıl yöneteceğini belirler. text-overflow ise genellikle tek satırlık metnin kırpıldığını göstermek, örneğin üç nokta kullanmak için overflow: hidden ve white-space: nowrap ile birlikte kullanılır.Kaydırılabilir kutu klavyeyle kullanılamıyorsa ne yapılmalı?
Gerekli tarayıcılarda kapsayıcıyı
tabindex="0" ile odaklanabilir yapın; anlamlı bir ad verin. Örnekteki role="region" ve aria-label bunu destekler. Tab ile odaklanıp ok tuşlarıyla deneyin ve görünür odak çerçevesini kaldırmayın.Bir resmi kutuya sığdırmak için hangi yöntem kullanılmalı?
Resmin kutudan taşmaması için çoğu durumda
max-width: 100%; height: auto; kullanılır. overflow resmi kırpabilir, fakat resmi orantılı biçimde küçültmez.