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

Sıradaki ders: Overflow scroll ve auto

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler