overflow-inline

**overflow-inline** CSS 属性设置当内容溢出盒子的内联开始和结束边缘时显示的内容。这可能是无内容、滚动条或溢出内容。

**注意：**overflow-inline 属性映射到overflow-y 或 overflow-x，具体取决于文档的书写模式。

语法

css
/* Keyword values */
overflow-inline: visible;
overflow-inline: hidden;
overflow-inline: clip;
overflow-inline: scroll;
overflow-inline: auto;

/* Global values */
overflow-inline: inherit;
overflow-inline: initial;
overflow-inline: revert;
overflow-inline: revert-layer;
overflow-inline: unset;

overflow-inline 属性指定为单个 <overflow> 关键字值。

Values

visible

内容不会被裁剪，并且可能会渲染在填充框的内联开始和结束边缘之外。

hidden

如有必要，内容会被裁剪以适合填充框中的内联尺寸。不提供滚动条。

clip

溢出内容在使用 overflow-clip-margin 属性定义的元素的溢出裁剪边缘处被裁剪。

scroll

如有必要，内容会被裁剪以适合内联尺寸的填充框。无论内容是否实际被裁剪，浏览器都会显示滚动条。（这可以防止内容更改时滚动条出现或消失。）打印机可能仍然打印溢出的内容。

auto

取决于用户代理。如果内容适合填充框，则它看起来与visible相同，但仍然建立一个新的块级格式化上下文。桌面浏览器如果内容溢出则提供滚动条。

正式定义

Initial valueauto
Applies to块级容器、弹性容器和网格容器
Inheritedno
Computed value按指定值计算，但如果 overflow-x 或 overflow-y 均不为 visible 或 clip，则 visible/clip 分别计算为 auto/hidden
Animation typediscrete

正式语法

overflow-inline = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

示例

设置内联溢出行为

HTML

html
<ul>
  <li>
    <code>overflow-inline: hidden</code> (hides the text outside the box)
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: scroll</code> (always adds a scrollbar)
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: visible</code> (displays the text outside the box if
    needed)
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: auto</code> (equivalent to <code>scroll</code>
    in most browsers)
    <div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: clip</code> (hides the text outside the box beyond
    the overflow clip edge)
    <code>clip</code>
    <div id="div5">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>
</ul>

CSS

css
div {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-inline: hidden;
}
#div2 {
  overflow-inline: scroll;
}
#div3 {
  overflow-inline: visible;
}
#div4 {
  overflow-inline: auto;
}
#div5 {
  overflow-inline: clip;
  overflow-clip-margin: 2em;
}

Result

规范

Specification
CSS 溢出模块级别 3
# overflow-control

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅