CSS 媒体功能 - overflow-inline

CSS 媒体功能 overflow-inline 允许您检查输出设备如何管理沿内联轴延伸到原始包含块之外的内容。

可能的值

none − 超出内联轴的内容不可见
scroll - 通过移动滚动条，可以看到延伸到内联轴之外的内容。

语法


overflow-inline: none | scroll;

CSS overflow-inline - none 值

以下示例演示了 overflow-inline： none 属性的使用，当内容溢出时，内联轴文本颜色保持黑色并添加滚动条 -


<html>
<head>
<style>
	 	p {
	 	 	 white-space: nowrap;
	 	}
	 	@media (overflow-inline: none) {
	 	 	 p {
	 	 	 	 	color: blue;
	 	 	 }
	 	}	
</style>
</head>
<body>
	 	<p>
Lorem Ipsum的段落有很多变体，但大多数都有某种形式的改变，比如注入幽默，或者随机使用看起来甚至不太可信的单词。Lorem Ipsum的段落有很多变体，但大多数都有某种形式的改变，比如注入幽默，或者随机使用看起来甚至不太可信的单词。
	 	</p>
</body>
</html>

CSS overflow-inline - scroll 值

以下示例演示了如何使用 CSS 属性 overflow-inline： scroll 属性，当内容溢出时，内联轴文本颜色变为蓝色并添加滚动条 -


<html>
<head>
<style>
	 	p {
	 	 	 white-space: nowrap;
	 	}
	 	@media (overflow-inline: scroll) {
	 	 	 p {
	 	 	 	 	color: blue;
	 	 	 }
	 	}	
</style>
</head>
<body>
	 	<p>
Lorem Ipsum的段落有很多变体，但大多数都有某种形式的改变，比如注入幽默，或者随机使用看起来甚至不太可信的单词。Lorem Ipsum的段落有很多变体，但大多数都有某种形式的改变，比如注入幽默，或者随机使用看起来甚至不太可信的单词。
	 	</p>
</body>
</html>

打印本页