CSS Overflow

21/09/2023

CSS overflow feature is used to edit the content in cases where the content overflows from the area on the HMTL page.

CSS Overflow Types

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

Overflow Hidden

When overflow:hidden is used, parts of the content that overflow the boundaries are hidden and not shown to the user.

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

When overflow:scroll is used, content that overflows the boundaries can be displayed by scrolling with a scroll.

<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

<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

<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>

CSS Overflow

CSS Overflow Types

Overflow Hidden

Overflow Scroll

Overflow Auto

Overflow Visible

CSS Pseudo Child Selector

CSS letter-spacing

CSS Border

CSS Overflow

CSS Optimization, Remove CSS (Minify, Defer, Extract)

CSS Selectors

CSS Order

CSS Multi Column Layout

CSS Margin

CSS Comments