CSS overflow-inline Property

Description

The overflow-inline CSS property controls what happens to content that is too big to fit within an element's inline dimension (i.e., width for horizontal writing modes and height for vertical writing modes). It can be used to specify whether to clip the content, add a scrollbar, or allow the content to overflow outside of the element. The overflow-inline property is especially useful for elements that contain long text strings, such as <span> elements and <div> elements with display: inline-block. It can be used to prevent the text from overflowing outside of the element's boundaries and disrupting the layout of the page.

Initial value
auto
Applies to
Block-containers, flex containers, and grid containers
Inherited
no
Computed value
as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
Animatable
discrete
JavaScript syntax
object.style.overflowInline

Syntax

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

Values

  • visibleContent is not clipped and may be rendered outside the padding box's inline start and end edges.
  • hiddenContent is clipped if necessary to fit the inline dimension in the padding box. No scrollbars are provided.
  • clipOverflow content is clipped at the element's overflow clip edge that is defined using the overflow-clip-margin property.
  • scrollContent is clipped if necessary to fit in the padding box in the inline dimension. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.
  • autoDepends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows.

Example

<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>
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;
}

Browser Support

The following table will show you the current browser support for the CSS overflow-inline property.

Desktop
Edge Chrome Firefox Opera Safari
xx69xx
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
x79xxxx

Last updated by CSSPortal on: 31st December 2023