CSS媒体特性 - overflow-inline

CSS overflow-inline 媒体特性允许您检查输出设备如何处理沿内联轴超出原始包含块的内容。

可能的值

none − 超出内联轴的内容不可见
scroll − 超出内联轴的内容可以通过移动滚动条来查看。

语法

overflow-inline: none | scroll;

CSS overflow-inline - none 值

以下示例演示了使用overflow-inline: none 属性时，内容超出内联轴时文本颜色保持黑色并添加滚动条的情况：

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

以下示例演示了如何使用 CSS 属性overflow-inline: scroll 属性，当内容超出内联轴时，文本颜色变为蓝色并添加滚动条：

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

打印页面