Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS overflow özelliği ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

57 views

overflow CSS özelliği, bir öğenin içeriği sınırlayıcı kutusunu aştığında ne olacağını belirler. Bu özellik, özellikle içerik boyutu önceden bilinmeyen veya dinamik olarak değişebilen durumlar için önemlidir. Öğenin içeriği kutusunun boyutlarından büyükse, overflow özelliği ile bu fazla içeriğin nasıl ele alınacağını yönetebilirsiniz.

Kullanılabilir Değerler:

visible: Varsayılan değer. İçerik kutunun dışına taşar ve görünür halde kalır.

hidden: Fazla içerik gizlenir ve görünmez.

scroll: Öğeye her zaman yatay ve/veya dikey kaydırma çubukları ekler, bu sayede kullanıcı fazla içeriği görebilir. Fazla içerik olmasa bile kaydırma çubukları görünür kalır.

auto: Tarayıcı, içeriğin kutunun dışına taşıp taşmadığına bağlı olarak otomatik olarak kaydırma çubuklarını gösterir veya gizler.

Özellikler:

overflow-x: Yalnızca yatay eksendeki taşmayı kontrol eder.

overflow-y: Yalnızca dikey eksendeki taşmayı kontrol eder.

Bu özellikler sayesinde, yatay ve dikey taşmayı bağımsız olarak yönetebilirsiniz.

 

 

TailwindCSS:

Class
Properties
overflow-auto overflow: auto;
overflow-hidden overflow: hidden;
overflow-clip overflow: clip;
overflow-visible overflow: visible;
overflow-scroll overflow: scroll;
overflow-x-auto overflow-x: auto;
overflow-y-auto overflow-y: auto;
overflow-x-hidden overflow-x: hidden;
overflow-y-hidden overflow-y: hidden;
overflow-x-clip overflow-x: clip;
overflow-y-clip overflow-y: clip;
overflow-x-visible overflow-x: visible;
overflow-y-visible overflow-y: visible;
overflow-x-scroll overflow-x: scroll;
overflow-y-scroll overflow-y: scroll;

 

 

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...