CSS OVERFLOW (TAŞMA) DEĞERLERİ

Merhaba..

CSS ile , boyutları sınırlı bir kapsayıcı içerisindeki içeriğin, kapsayıcı boyutlarını aştığında nasıl bir  görünüm sağlanacağı OVERLOW özelliği ile belirlenir..

OVERFLOW

Overflow taşma anlamına gelir. Herhangi bir eleman içerisindeki içeriğin, elemanın genişlik yada yüksekliğini aşması durumunda izlenecek yolu belirler. Overflow hem yatay hemde dikeyde taşmayı kontrol eder. 4 değer alır. 

• VISIBLE  : Taşma görünür..
• HIDDEN : Taşma görünmez..
• SCROLL  : Taşma içinkaydıma çubukları çıkar..
• AUTO  : Boyut aşıldığında kaydırma çubukları çıkar..

VİSİBLE 

Taşmanın varsayılan değeridir. Visible , görünebilir anlamına gelir. Dolayısıyla içerik kapsayıcı boyutlarını aşsa bile görüntülenecektir..

CSS

div {
  width:150px;
  height:150px;
  background-color: orange;
  
  overflow:visible;    /* taşma görünür */ 
}

HTML

<div>
		Lorem ipsum dolor sit amet consectetur adipisicing, elit. Facere neque, reprehenderit. Id ut cum dolore voluptates vel adipisci qui quod possimus quos soluta at ipsum, molestias cupiditate ratione nesciunt, provident?
</div>

EKRAN

HİDDEN

Hidden, gizli anlamına gelir. Dolayısıyla içerik kapsayıcı boyutlarını aştığında görüntülenmecektir..

CSS

div {
  width:150px;
  height:150px;
  background-color: orange;
  
  overflow:hidden;    /* taşma görünmez */ 
}

HTML

<div>
		Lorem ipsum dolor sit amet consectetur adipisicing, elit. Facere neque, reprehenderit. Id ut cum dolore voluptates vel adipisci qui quod possimus quos soluta at ipsum, molestias cupiditate ratione nesciunt, provident?
</div>

EKRAN

SCROLL

Kapsayıcı kenarlarında kaydırma çubukları görünecektir.. İçerik kapsayıcı boyutlarını aşsa da aşmasa da kaydrıma çubukları görünecektir..

CSS

div {
  width:150px;
  height:150px;
  background-color: orange;
  
  overflow:scroll;    /* kaydırma çubukları görünür.. */ 
}

HTML

<div>
		Lorem ipsum dolor sit amet consectetur adipisicing, elit. Facere neque, reprehenderit. Id ut cum dolore voluptates vel adipisci qui quod possimus quos soluta at ipsum, molestias cupiditate ratione nesciunt, provident?
</div>

EKRAN

AUTO

İçerik kapsayıcı boyutlarını aştığında  kaydırma çubukları görünecektir. Eğer içerik sadece yatayda taşıyorsa yatayda, dikeyde taşıyorsa dikeyde kaydırma çucukları görünür. HEr iki yöndede taşma var ise ,her iki yöndede kaydırma çubukları görünür. Ancak içerik  kapsayıcı boyutlarını aşmadığında çubuklar görünmez.. 

CSS

div {
  width:150px;
  height:150px;
  background-color: orange;
  
  overflow:auto;    /* içerik taşınca kaydırma çubukları görünür.. */ 
}

HTML

<div>
		Lorem ipsum dolor sit amet consectetur adipisicing, elit. Facere neque, reprehenderit. Id ut cum dolore voluptates vel adipisci qui quod possimus quos soluta at ipsum, molestias cupiditate ratione nesciunt, provident?
</div>

EKRAN

OVERFLOW-X ve OVERFLOW-Y

Overflow her i yöndeki taşmayı konttrol ederken;

• OVERFLOW-X : sadece yatay yöndeki taşmaları  kontrol eder..
• OVERFLOW-Y .: sadece dikey yönde taşmaları konrol eder..

Aldıkları değerler , overflow ile aynıdır...

Görüşmek üzere..