CSS - overflow-inline 属性_CSS 菜鸟教程

CSS overflow-inline 属性控制溢出元素的内联边缘时溢出内容的显示方式。

属性 overflow-inline 仅在 Firefox 浏览器上受支持。因此，所有示例仅适用于Firefox浏览器。

可能的值

visible -溢出填充框的内容将显示在其内联开始边缘和结束边缘之外。
hidden -内容在填充框的内联开始边缘和结束边缘进行剪裁。
clip -溢出内容在溢出剪辑的边缘被剪裁。
scroll −当元素的内容超过其边界时，将添加滚动条。
auto −当内容溢出容器时，将自动显示滚动条。

适用于

所有 HTML 元素。

DOM 语法

overflow-inline: visible|hidden|clip|scroll|auto;

CSS overflow-inline - 具有可见和隐藏的值

可以将 overflow-inline 属性设置为 visible 以允许内容溢出填充框的边缘，也可以设置为 hidden 以防止其溢出。

<html>
<head>
<style>
	 	.container {
	 	 	 display:flex;
	 	}
	 	div.overflow-inline-visible {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 170px;
	 	 	 height: 160px;
	 	 	 overflow-inline: visible;
	 	 	 margin-right: 100px;
	 	}
	 	h4 {
	 	 	 text-align: center;
	 	 	 color: #D90F0F;
	 	}
	 	div.overflow-inline-hidden {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 170px;
	 	 	 height: 160px;
	 	 	 overflow-inline: hidden;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="overflow-inline-visible">
	 	 	 	 	<h4>qikepu CSS Overflow-inline Visible</h4>
	 	 	 	 	Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
	 	 	 </div>
	 	 	 <div class="overflow-inline-hidden">
	 	 	 	 	<h4>qikepu CSS Overflow-inline Hidden</h4>
	 	 	 	 	Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
	 	 	 </div>
	 	</div>
</body>
</html>

CSS overflow-inline - clip 值

如果将 overflow-inline 属性设置为 clip，则如果内容溢出填充框的内联尺寸，则内容将被剪裁。不会添加任何滚动条。

<html>
<head>
<style>
	 	div.overflow-inline-clip {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 170px;
	 	 	 height: 160px;
	 	 	 overflow-inline: clip;
	 	}
	 	h4 {
	 	 	 text-align: center;
	 	 	 color: #D90F0F;
	 	}
</style>
</head>
<body>
	 	<div class="overflow-inline-clip">
	 	 	 <h4>qikepu CSS Overflow-inline Clip</h4>
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
	 	</div>
</body>
</html>

CSS overflow-inline - 带有滚动和自动值

以下示例演示了如何将 overflow-inline 属性设置为 scroll 以添加 scrollbar，或设置为 auto 以仅在必要时添加 scrollbar -

<html>
<head>
<style>
	 	.container {
	 	 	 display:flex;
	 	}
	 	div.overflow-inline-scroll {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 170px;
	 	 	 height: 160px;
	 	 	 overflow-inline: scroll;
	 	 	 margin-right: 100px;
	 	}
	 	h4 {
	 	 	 text-align: center;
	 	 	 color: #D90F0F;
	 	}
	 	div.overflow-inline-auto {
	 	 	 background-color: #2fe262;
	 	 	 border: 2px solid #000000;
	 	 	 width: 170px;
	 	 	 height: 160px;
	 	 	 overflow-inline: auto;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="overflow-inline-scroll">
	 	 	 	 	<h4>qikepu CSS Overflow-inline Scroll</h4>
	 	 	 	 	Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
	 	 	 </div>
	 	 	 <div class="overflow-inline-auto">
	 	 	 	 	<h4>qikepu CSS Overflow-inline Auto</h4>
	 	 	 	 	Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
	 	 	 </div>
	 	</div>
</body>
</html>

<< CSS - overflow-block 属性 CSS - overscroll-behavior-block 属性 >>