CSS Media Features - overflow-inline

CSS overflow-inline media feature allows you to check how the ouput device manage the content that extends beyond the original containing block along the inline axis.

Possible Values

  • none − The content that extends beyond the inline axis is not visible

  • scroll − The content that extends beyond the inline axis is visible by moving the scrollbar.

Syntax

overflow-inline: none | scroll;

CSS overflow-inline - none Value

The following example demonstrates the use of overflow-inline: none property, when content overflows the inline axis text color remains black and added scrollbar −

<html>
<head>
<style>
   p {
      white-space: nowrap;
   }
   @media (overflow-inline: none) {
      p {
         color: blue;
      }
   } 
</style>
</head>
<body>
   <p>
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
   </p>
</body>
</html>

CSS overflow-inline - scroll Value

The following example demonstrates that how to use the CSS property overflow-inline: scroll property, when content overflows the inline axis text color changes to the blue and added scrollbar −

<html>
<head>
<style>
   p {
      white-space: nowrap;
   }
   @media (overflow-inline: scroll) {
      p {
         color: blue;
      }
   } 
</style>
</head>
<body>
   <p>
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
   </p>
</body>
</html>
Advertisements