CSS 属性

CSS max-inline-size 属性指定元素块的最大水平或垂直尺寸，由其书写模式决定，相当于 max-height 和 max-width 基于书写模式值。

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

属性值

max-inline-size 属性接受与 max-height 和 max-widht。

适用范围

与width 和 height 相同。

语法

<length> 值

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

<percentage> 值

max-inline-size: 40%;

关键字值

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>易学教程</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>易学教程</h2>
      <h4>CSS max-inline-size: 80%</h4>
      <p>Failure is the mother of success.</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>易学教程</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>Failure is the mother of success.</p>
   </div>
</body>
</html>