Overflow visible ve hidden
overflow: visible ve hidden değerlerini öğrenirsin.
Taşan içerik ne olur?
Bir kutunun içeriği kutudan taşıyabilir — uzun bir metin, geniş bir görsel ya da yan yana ögeler. CSS'in overflow özelliği bu taşmayı nasıl ele alacağını söyler. Varsayılan değer visible'dır: taşan kısım kutunun dışına akar ve görünür kalır.
Bazen bu istenmez; örneğin bir kart içindeki uzun metin komşu ögelerin üstüne taşar. O zaman overflow özelliğine farklı bir değer vererek taşmayı denetim altına alırsın.
Taşanı kes: overflow: hidden
overflow: hidden değeri taşan kısmı kırpar ve gizler. İçerik kutudan büyük olsa bile dışarı görünmez. Bu, sabit yükseklikte kartlar, rozetler ve avatar çerçeveleri için yararlıdır.
Dikkat: hidden kaydırma çubuğu eklemez; içerik yalnızca kesilir. Bu yüzden metnin yarısı kaybolabilir. Bu yüzden hidden'ı bilerek, kırpmayı istediğin yerlerde kullanırsın.
Uygulama Panel içeriğini kırpa
Bir .panel sınıf seçicisi yaz ve içine overflow: hidden bildirimi ekle. Böylece panelin yüksekliğini aşan içerik kırparak gizlenecek.
Örnek çözümü göster
/* içeriği kırp */
.panel {
overflow: hidden;
}Kendini test et
-
overflow: visible ne yapar?
.panel { height: 80px; overflow: visible; }- Taşan içeriği kutunun dışında görünür bırakır (varsayılan)
- Taşan kısmı gizler
- Her zaman kaydırma çubuğu gösterir
- İçeriği kutuya sığacak şekilde kırpar
Cevabı göster
Taşan içeriği kutunun dışında görünür bırakır (varsayılan) — Doğru. visible varsayılan değerdir ve taşan kısmı görünür bırakır.
-
Panel içeriğini kırpa
.panel { ____; }Cevabı göster
.panel { overflow: hidden; } -
Değeri davranışına eşle
- visible
- Taşanı görünür bırakır
- hidden
- Taşanı kırpar ve gizler
- scroll
- Her zaman kaydırma çubuğu
- auto
- Yalnızca gerekince çubuk