CSS 資料型別 - <overflow>

CSS 資料型別<overflow>表示用於overflow屬性和詳細屬性overflow-block、overflow-inline、overflow-x和overflow-y的關鍵字值。

可能的值

<overflow>資料型別使用下面列出的值之一指定。

visible：內容不被裁剪。它延伸到盒子之外。
hidden：內容被裁剪，溢位部分隱藏。
clip：內容在元素的溢位剪下邊緣處被裁剪。
scroll：內容被裁剪，並新增捲軸以允許使用者滾動檢視隱藏的內容。
auto：瀏覽器在內容溢位時自動新增捲軸。

語法

<overflow> = visible | hidden | clip | scroll | auto

CSS <overflow> - 基本示例

在提供的示例中，CSS 資料型別<overflow>應用於<pre>元素以調節溢位內容的行為。

每個<pre>元素的內容決定了當它超過其定義的尺寸時，基於設定給overflow的不同值，將如何表現。

<html>
<head>
<style>
   pre {
      border: 2px solid black;
      margin-bottom: 3em;     
   }
   ::before {
      font-size: 15px;
      font-weight: bold;
      color: white;
      background: darkorchid;
      display: inline-block;
      width: 100%;
      padding: 5px 10px;
      box-sizing: border-box;
   }
   pre {
      block-size: 110px;
      inline-size: 250px;
   }
   pre:nth-of-type(1) {
      overflow: hidden;
   }
   pre:nth-of-type(1)::before {
      content: "hidden: ";
   }
   pre:nth-of-type(2) {
      overflow: clip;
   overflow-clip-margin: 1em;
   }
   pre:nth-of-type(2)::before {
      content: "clip: ";
   }
   pre:nth-of-type(3) {
      overflow: scroll;
   }
   pre:nth-of-type(3)::before {
      content: "scroll: ";
   }
   pre:nth-of-type(4) {
      overflow: auto;
   }
   pre:nth-of-type(4)::before {
      content: "auto: ";
   }
   pre:nth-of-type(5) {
      overflow: clip;
      overflow: overlay;
      overflow-clip-margin: 3em;
   }
   pre:nth-of-type(5)::before {
      content: "overlay (or clip if not supported): ";
   }
   pre:nth-of-type(6) {
      overflow: visible;
   }
   pre:nth-of-type(6)::before {
      content: "visible: ";
   }
</style>
</head>
<body>
<pre> 
Some say the world will end in fire,
Some say in ice.
From what I've tasted of desire
I hold with those who favour fire.
But if it had to perish twice,
I think I know enough of hate
To say that for destruction ice
Is also great
And would suffice.
<b>-Robert Frost</b>
</pre>
<pre> 
Some say the world will end in fire,
Some say in ice.
From what I've tasted of desire
I hold with those who favour fire.
But if it had to perish twice,
I think I know enough of hate
To say that for destruction ice
Is also great
And would suffice.
<b>-Robert Frost</b>
</pre>
<pre> 
Some say the world will end in fire,
Some say in ice.
From what I've tasted of desire
I hold with those who favour fire.
But if it had to perish twice,
I think I know enough of hate
To say that for destruction ice
Is also great
And would suffice.
<b>-Robert Frost</b>
</pre>
<pre> 
Some say the world will end in fire,
Some say in ice.
From what I've tasted of desire
I hold with those who favour fire.
But if it had to perish twice,
I think I know enough of hate
To say that for destruction ice
Is also great
And would suffice.
<b>-Robert Frost</b>
</pre>
<pre> 
Some say the world will end in fire,
Some say in ice.
From what I've tasted of desire
I hold with those who favour fire.
But if it had to perish twice,
I think I know enough of hate
To say that for destruction ice
Is also great
And would suffice.
<b>-Robert Frost</b>
</pre>
<pre> 
Some say the world will end in fire,
Some say in ice.
From what I've tasted of desire
I hold with those who favour fire.
But if it had to perish twice,
I think I know enough of hate
To say that for destruction ice
Is also great
And would suffice.
<b>-Robert Frost</b>
</pre>
</body>
</html>

列印頁面