CSS - overflow-inline Property

CSS overflow-inline property controls how overflowing content is displayed when it overflows the inline edges of an element.

Property overflow-inline is supported only on Firefox browser. Hence all the examples will work only on Firefox browsers.

Possible Values

  • visible − The content that overflows the padding box is shown outside of its inline start and end edges.

  • hidden − The content is clipped at the inline start and end edges of the padding box.

  • clip − The overflow content is clipped at the edge of the overflow clip.

  • scroll − The scroll bar is added when the content of an element exceeds its boundaries.

  • auto − A scroll bars are automatically displayed when content overflows the container.

Applies to

All the HTML elements.

DOM Syntax

overflow-inline: visible|hidden|clip|scroll|auto;

CSS overflow-inline - With visible & hidden Values

The overflow-inline property can be set to visible to allow the content to overflow the padding box's edges, or to hidden to prevent it from overflowing.

<html>
<head>
<style>
   .container {
      display:flex;
   }
   div.overflow-inline-visible {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-inline: visible;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   div.overflow-inline-hidden {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-inline: hidden;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-inline-visible">
         <h4>Tutorialspoint CSS Overflow-inline Visible</h4>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
      </div>
      <div class="overflow-inline-hidden">
         <h4>Tutorialspoint CSS Overflow-inline Hidden</h4>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
      </div>
   </div>
</body>
</html>

CSS overflow-inline - clip Value

If you set the overflow-inline property to clip, the content will be clipped if it overflows the inline dimension of the padding box. No scrollbars will be added.

<html>
<head>
<style>
   div.overflow-inline-clip {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-inline: clip;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
</style>
</head>
<body>
   <div class="overflow-inline-clip">
      <h4>Tutorialspoint CSS Overflow-inline Clip</h4>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
   </div>
</body>
</html>

CSS overflow-inline - With scroll & auto Values

Following example demonstrates how the overflow-inline property can be set to scroll to add a scrollbar, or to auto to add a scrollbar only if necessary −

<html>
<head>
<style>
   .container {
      display:flex;
   }
   div.overflow-inline-scroll {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-inline: scroll;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   div.overflow-inline-auto {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-inline: auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-inline-scroll">
         <h4>Tutorialspoint CSS Overflow-inline Scroll</h4>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
      </div>
      <div class="overflow-inline-auto">
         <h4>Tutorialspoint CSS Overflow-inline Auto</h4>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
      </div>
   </div>
</body>
</html>
Advertisements