CSS - max-width 属性

CSS max-width 属性用于设置元素宽度的上限。

可能的值

none - 元素的宽度没有限制。
<length> − 任何长度单位。元素的宽度值永远不能超过此距离。
<percentage> - 将元素的宽度限制为包含块宽度的百分比。
initial − 将 max-width 的值设置为默认值。
inherit − max-width 的值继承自其父值。

适用于

所有 HTML 元素，但未替换的内联元素和表格元素除外。

DOM 语法


object.style.maxWidth = "50px"

CSS max-width - <length> 值

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


<html>
<head>
<style>
	 	p {
	 	 	 max-width:100px;
	 	 	 height:200px;
	 	 	 border:4px solid #0000ff;
	 	 	 padding:5px;
	 	 	 margin:10px;
	 	}
</style>
</head>
<body>
	 	<p>
	 	 	 This paragraph is 200px high and max-width is 100px
	 	 	 Hence the border is not covering the entire text and
	 	 	 there is some part of text outside the border. This is
	 	 	 due to the max-width value set for p tag.
	 	</p>
</body>
</html>

CSS max-width - 具有不同的值

这是另一个示例，演示了在 max-width 属性中使用不同类型的值 -


<html>
<head>
<style>
	 	div.a {
	 	 	 border: 2px solid red;
	 	 	 max-width: 200px;
	 	 	 width: 400px;
	 	 	 overflow: auto;
	 	 	 margin-bottom: 4px;
	 	}
	 	div.b {
	 	 	 border: 2px solid blue;
	 	 	 max-width: 40%;
	 	 	 overflow: auto;
	 	 	 margin-bottom: 4px;
	 	}
	 	div.c {
	 	 	 border: 2px solid red;
	 	 	 max-width: none;
	 	 	 width: 400px;
	 	 	 overflow: auto;
	 	 	 margin-bottom: 4px;
	 	}
</style>
</head>
<body>
	 	<div class="a">
	 	 	 <h2>max-width: 200px and width:400px</h2>
	 	 	 <p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is 200px less than the width which is 400px.</p>
	 	</div>
	 	<div class="b">
	 	 	 <h2>max-width: 40%</h2>
	 	 	 <p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is 40%.</p>
	 	</div>
	 	 	 <div class="c">
	 	 	 <h2>max-width: none (default):</h2>
	 	 	 <p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is none.</p>
	 	</div>
</body>
</html>

打印本页