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 数据类型 <pre> 应用于 <pre> 元素，以调节溢出内容的行为。
每个 <pre> 元素的内容决定其行为方式。当它超过基于设置为溢出的各种值定义的尺寸时。
<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>
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
<b>-李白</b>
</pre>
<pre>
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
<b>-李白</b>
</pre>
<pre>
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
<b>-李白</b>
</pre>
<pre>
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
<b>-李白</b>
</pre>
<pre>
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
<b>-李白</b>
</pre>
<pre>
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
<b>-李白</b>
</pre>
</body>
</html>