CSS - max-inline-size 属性

CSS max-inline-size 属性指定元素块的最大水平或垂直大小，由其写入模式确定，并且等效于基于写入模式值的 max-height 和 max-width。

max-inline-size 属性分别设置水平写入模式的最大宽度和垂直写入模式的最大高度。伴生属性 max-block-size 定义了另一个维度。

可能的值

max-inline-size 属性接受与 max-height 和 max-width 相同的值。

适用于

与 width 和 height 相同。

语法

<length> 值


max-inline-size: 300px;
max-inline-size: 25em;

<percentage> 值


max-inline-size: 40%;

Keyword 值


max-inline-size: none;
max-inline-size: max-content;
max-inline-size: min-content;
max-inline-size: fit-content;
max-inline-size: fit-content(20em);

CSS max-inline-size - <length>值

以下示例演示了 max-inline-size： 300px 属性将元素的最大宽度设置为 300px −


<html>
<head>
<style>
	 	div {
	 	 	 background-color: greenyellow;
	 	 	 border: 3px solid red;
	 	 	 max-inline-size: 300px;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <h2>Tutorialspoint</h2>
	 	 	 <h4>CSS max-inline-size: 300px</h4>
	 	</div>
</body>
</html>

CSS max-inline-size - <percentage>值

以下示例演示了 max-inline-size： 80% 属性将元素的最大宽度设置为 80% −


<html>
<head>
<style>
	 	div {
	 	 	 background-color: greenyellow;
	 	 	 border: 3px solid red;
	 	 	 max-inline-size: 80%;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <h2>Tutorialspoint</h2>
	 	 	 <h4>CSS max-inline-size: 80%</h4>
	 	 	 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	 	</div>
</body>
</html>

CSS max-inline-size - <max-content> 值

以下示例演示了 max-inline-size： max-content 属性允许 div 元素的宽度水平扩展以适应内容 -


<html>
<head>
<style>
	 	div {
	 	 	 background-color: greenyellow;
	 	 	 border: 3px solid red;
	 	 	 max-inline-size: max-content;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <h2>Tutorialspoint</h2>
	 	 	 <h4>CSS max-inline-size: max-content</h4>
	 	</div>
</body>
</html>

CSS max-inline-size - 带有垂直文本

以下示例演示了 max-inline-size 属性，该属性具有在垂直方向上显示文本的写作模式 -


<html>
<head>
<style>
	 	div {
	 	 	 background-color: greenyellow;
	 	 	 border: 2px solid blue;
	 	 	 margin: 10px;
	 	 	 padding: 5px;
	 	 	 block-size: 100%;
	 	 	 max-inline-size: 100px;
	 	 	 writing-mode: vertical-rl;
	 	}
</style>
</head>
<body>
	 	<div >
	 	 	 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
	 	</div>
</body>
</html>

打印本页