CSS overflow-inline Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

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

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

Editor