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>

打印本页