CSS Konuları

CSS Overflow

19/02/2023

CSS overflow özelliği HMTL sayfasında içeriğin bulunduğu alandan taştığı durumlarda içeriği düzenlemek için kullanılır.

CSS Overflow Çeşitleri

  • overflow:hidden
  • overflow:scroll
  • overflow:auto
  • overflow:visible

Overflow Hidden

overflow:hidden kullanıldığında içeriğin sınırlar dışarısına taşan yerleri gizlenir ve kullanıcıya gösterilmez.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum felis felis, laoreet nec ipsum ac, tincidunt vehicula velit. Sed imperdiet accumsan ipsum, quis aliquam mauris vestibulum eu. Duis neque turpis, sodales ut lacinia ut, ornare eget dolor. Sed ac ultrices lectus. Fusce at semper lorem, in suscipit magna. Maecenas dapibus orci a risus porta finibus. Donec eu pretium ligula. Vivamus at leo nisl. Morbi tristique neque eget mauris vestibulum congue. Aenean maximus suscipit dui eu volutpat. Suspendisse lobortis tincidunt elit, non porta lorem commodo id. Aenean non mauris quis eros hendrerit tincidunt. Nulla porta nulla mi, in porta tortor sodales ut.

<style>
  .overflow-hidden {
     overflow:hidden;
   }
  .canvas {
     width: 350px; 
     height: 150px; 
     border: 1px solid;
   }
</style>

<p class="canvas overflow-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Vestibulum felis felis, laoreet nec ipsum ac, tincidunt vehicula velit. Sed imperdiet accumsan ipsum, quis aliquam mauris vestibulum eu. 
Duis neque turpis, sodales ut lacinia ut, ornare eget dolor. Sed ac ultrices lectus. 
Fusce at semper lorem, in suscipit magna. Maecenas dapibus orci a risus porta finibus. 
Donec eu pretium ligula. Vivamus at leo nisl. Morbi tristique neque eget mauris vestibulum congue. Aenean maximus suscipit dui eu volutpat. 
Suspendisse lobortis tincidunt elit, non porta lorem commodo id. Aenean non mauris quis eros hendrerit tincidunt. 
Nulla porta nulla mi, in porta tortor sodales ut.</p>

Overflow Scroll

overflow:scroll kullanıldığında sınırlar dışarısına taşan içerik bir scroll ile kaydırılarak görüntülenebilir.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum felis felis, laoreet nec ipsum ac, tincidunt vehicula velit. Sed imperdiet accumsan ipsum, quis aliquam mauris vestibulum eu. Duis neque turpis, sodales ut lacinia ut, ornare eget dolor. Sed ac ultrices lectus. Fusce at semper lorem, in suscipit magna. Maecenas dapibus orci a risus porta finibus. Donec eu pretium ligula. Vivamus at leo nisl. Morbi tristique neque eget mauris vestibulum congue. Aenean maximus suscipit dui eu volutpat. Suspendisse lobortis tincidunt elit, non porta lorem commodo id. Aenean non mauris quis eros hendrerit tincidunt. Nulla porta nulla mi, in porta tortor sodales ut.

<style>
  .overflow-scroll {
     overflow:scroll;
   }
  .canvas {
     width: 350px; 
     height: 150px; 
     border: 1px solid;
   }
</style>

<p class="canvas overflow-scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Vestibulum felis felis, laoreet nec ipsum ac, tincidunt vehicula velit. Sed imperdiet accumsan ipsum, quis aliquam mauris vestibulum eu. 
Duis neque turpis, sodales ut lacinia ut, ornare eget dolor. Sed ac ultrices lectus. 
Fusce at semper lorem, in suscipit magna. Maecenas dapibus orci a risus porta finibus. 
Donec eu pretium ligula. Vivamus at leo nisl. Morbi tristique neque eget mauris vestibulum congue. Aenean maximus suscipit dui eu volutpat. 
Suspendisse lobortis tincidunt elit, non porta lorem commodo id. Aenean non mauris quis eros hendrerit tincidunt. 
Nulla porta nulla mi, in porta tortor sodales ut.</p>

Overflow Auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum felis felis, laoreet nec ipsum ac, tincidunt vehicula velit. Sed imperdiet accumsan ipsum, quis aliquam mauris vestibulum eu. Duis neque turpis, sodales ut lacinia ut, ornare eget dolor. Sed ac ultrices lectus. Fusce at semper lorem, in suscipit magna. Maecenas dapibus orci a risus porta finibus. Donec eu pretium ligula. Vivamus at leo nisl. Morbi tristique neque eget mauris vestibulum congue. Aenean maximus suscipit dui eu volutpat. Suspendisse lobortis tincidunt elit, non porta lorem commodo id. Aenean non mauris quis eros hendrerit tincidunt. Nulla porta nulla mi, in porta tortor sodales ut.

<style>
  .overflow-auto {
     overflow:auto;
   }
  .canvas {
     width: 350px; 
     height: 150px; 
     border: 1px solid;
   }
</style>

<p class="canvas overflow-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Vestibulum felis felis, laoreet nec ipsum ac, tincidunt vehicula velit. Sed imperdiet accumsan ipsum, quis aliquam mauris vestibulum eu. 
Duis neque turpis, sodales ut lacinia ut, ornare eget dolor. Sed ac ultrices lectus. 
Fusce at semper lorem, in suscipit magna. Maecenas dapibus orci a risus porta finibus. 
Donec eu pretium ligula. Vivamus at leo nisl. Morbi tristique neque eget mauris vestibulum congue. Aenean maximus suscipit dui eu volutpat. 
Suspendisse lobortis tincidunt elit, non porta lorem commodo id. Aenean non mauris quis eros hendrerit tincidunt. 
Nulla porta nulla mi, in porta tortor sodales ut.</p>

Overflow Visible

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum felis felis, laoreet nec ipsum ac, tincidunt vehicula velit. Sed imperdiet accumsan ipsum, quis aliquam mauris vestibulum eu. Duis neque turpis, sodales ut lacinia ut, ornare eget dolor. Sed ac ultrices lectus. Fusce at semper lorem, in suscipit magna. Maecenas dapibus orci a risus porta finibus. Donec eu pretium ligula. Vivamus at leo nisl. Morbi tristique neque eget mauris vestibulum congue. Aenean maximus suscipit dui eu volutpat. Suspendisse lobortis tincidunt elit, non porta lorem commodo id. Aenean non mauris quis eros hendrerit tincidunt. Nulla porta nulla mi, in porta tortor sodales ut.

<style>
  .overflow-visible {
     overflow:visible;
   }
  .canvas {
     width: 350px; 
     height: 150px; 
     border: 1px solid;
   }
</style>

<p class="canvas overflow-visible">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Vestibulum felis felis, laoreet nec ipsum ac, tincidunt vehicula velit. Sed imperdiet accumsan ipsum, quis aliquam mauris vestibulum eu. 
Duis neque turpis, sodales ut lacinia ut, ornare eget dolor. Sed ac ultrices lectus. 
Fusce at semper lorem, in suscipit magna. Maecenas dapibus orci a risus porta finibus. 
Donec eu pretium ligula. Vivamus at leo nisl. Morbi tristique neque eget mauris vestibulum congue. Aenean maximus suscipit dui eu volutpat. 
Suspendisse lobortis tincidunt elit, non porta lorem commodo id. Aenean non mauris quis eros hendrerit tincidunt. 
Nulla porta nulla mi, in porta tortor sodales ut.</p>