CSS - overflow-clip-margin 属性

CSS overflow-clip-margin 属性指定内容在被剪裁之前可以溢出元素框的距离。此距离称为溢出剪辑边距。

可能的值

<length> -长度（以像素或 em 为单位）（相对于元素的字体大小）。偏移量指定溢出剪裁边缘从所选框边缘延伸的距离。默认值 e 值设置为零。负值无效。
<visual-box> -当指定的偏移量为零时，视觉框指定要用作溢出裁剪边缘原点的框边缘。如果省略，则将元素的填充框用作默认值。（值可以是 - content-box | padding-box | border-box ）

适用于

所有 HTML 元素。

语法


overflow-clip-margin: length in px | length in em | content-box | padding-box | border-box;

CSS overflow-clip-margin - <length> 值

我们可以将 overflow-clip-margin 属性设置为长度值，例如 px 或 em。此长度值指定在剪裁内容之前可以在元素框外绘制多远。


<html>
<head>
<style>
	 	.container {
	 	 	 display: flex;
	 	}
	 	.overflow-px {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 250px;
	 	 	 height: 150px;
	 	 	 overflow: clip;
	 	 	 overflow-clip-margin: 30px;
	 	 	 margin-right: 100px;
	 	}
	 	h4 {
	 	 	 text-align: center;
	 	 	 color: #D90F0F;
	 	}
	 	.overflow-em {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 250px;
	 	 	 height: 150px;
	 	 	 overflow: clip;
	 	 	 overflow-clip-margin: 2em;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="overflow-px">
	 	 	 	 	<h4>Tutorialspoint CSS Overflow-clip-margin</h4>
	 	 	 	 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
	 	 	 	 	standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
	 	 	 	 	make a type specimen book.</p>
	 	 	 </div>
	 	 	 <div class="overflow-em">
	 	 	 	 	<h4>Tutorialspoint CSS Overflow-clip-margin</h4>
	 	 	 	 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
	 	 	 	 	make a type specimen book.</p>
	 	 	 </div>
	 	</div>
</body>
</html>

CSS overflow-clip-margin - <visual-box> 值

以下示例将元素的 overflow-clip-margin 属性设置为距内容框 30 像素。内容框是元素内容内部的区域，不包括任何填充或边框 -


<html>
<head>
<style>
	 	.overflow {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 250px;
	 	 	 height: 150px;
	 	 	 overflow: clip;
	 	 	 overflow-clip-margin: content-box 30px;
	 	 	 margin-right: 100px;
	 	}
	 	h4 {
	 	 	 text-align: center;
	 	 	 color: #D90F0F;
	 	}
</style>
</head>
<body>
	 	<div class="overflow">
	 	 	 <h4>Tutorialspoint CSS Overflow-clip-margin</h4>
	 	 	 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
	 	 	 make a type specimen book.</p>
	 	</div>
</body>
</html>

打印本页