CSS max-inline-size 属性

定义和用法

max-inline-size 属性指定元素在行内方向上的最大尺寸。

如果内容在行内方向上的尺寸小于最大尺寸，则 max-inline-size 属性值不起作用。

如果内容在行内方向上的尺寸大于最大尺寸，则将应用 max-inline-size 属性值。

注意：相关的 CSS 属性 writing-mode 定义了行内方向，这会影响 max-inline-size 属性的结果。对于英文页面，块方向是向下，而行内方向是从左到右。

CSS max-inline-size 属性与 CSS 属性 max-height 和 max-width 非常相似，但 max-inline-size 属性依赖于行内方向。

实例

例子 1

将 <div> 元素在行内方向上的最大尺寸设置为 60 像素：

div {
  max-inline-size: 60px;
}

亲自试一试

例子 2：书写模式

将 <div> 元素的 writing-mode 属性值设置为 vertical-rl 时，行内方向从侧向变为向下，这会影响 max-inline-size 属性的工作方式：

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

亲自试一试

例子 3：Max-inline-size vs Inline-size

观察一个 <div> 元素（inline-size 为 100px）和另一个 <div> 元素（max-inline-size 为 100px）在内容尺寸变化时的不同反应：

#div1 {
  max-inline-size: 100px;
}
#div2 {
  inline-size: 100px;
}

亲自试一试

CSS 语法

max-inline-size: auto|length|initial|inherit;

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

参考：CSS inline-size 属性

参考：CSS min-inline-size 属性

参考：CSS max-height 属性

参考：CSS max-width 属性

参考：CSS writing-mode 属性