Hisia cha CSS max-inline-size

定义和用法

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

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

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

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

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

实例

例子 1

将

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

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

亲自试一试

例子 2：书写模式

将

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

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

亲自试一试

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

观察一个

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

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

亲自试一试

CSS 语法

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

属性值

值 描述
auto 默认。元素的默认 max-inline-size 值。
length 使用 px、pt、cm 等单位。请参阅：Mafunzo ya viwango vya CSS.
% 指定相对于父元素在对应轴上的尺寸的百分比。
initial Inasababisha tabia hii kuwa na chaguo cha kuzingatia kwa msingi. Angalia: initial.
inherit Inasukumwa kutoka kwa kiwango cha kina cha kiumbe na kusakinisha tabia hii. Angalia: inherit.

Mafanikio ya kidharura

Chaguo cha kuzingatia: auto
Kusambaa: Hakuna
Kumaliza hali ya uharibifu: Inasukumwa. Angalia:Tabia za hali ya uharibifu.
Muundo: CSS3
Inayosababisha Kiingereza: object.style.maxInlineSize="60px"

Mwongozo wa kusakinisha kwa programu ya kusoma

Tafutaanotifaa yaandiko katika tabia za maelezo inaonyesha sababu ya kwanza ya kusakinisha tabia hii kwa programu ya kusoma kikabla ya Internet.

Chrome Edge Firefox Safari Opera
57.0 79.0 41.0 12.1 44.0

Mawasiliano ya kijana

Mawasiliano ya kijanaCSS inline-size hisia

Mawasiliano ya kijanaHisia cha CSS min-inline-size

Mawasiliano ya kijanaHisia cha CSS max-height

Mawasiliano ya kijanaHisia cha CSS max-width

Mawasiliano ya kijanaMwaka wa writing-mode katika CSS