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>

列印頁面