1. 개발자를 위한 웹 기술
  2. CSS
  3. CSS 참고서
  4. Properties
  5. overflow-inline

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

overflow-inline

Baseline 2025 *
Newly available

Since September 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

overflow-inline CSS 속성은 콘텐츠가 박스의 인라인 시작과 끝 가장자리를 넘어설 때 어떤 내용을 보여줄지를 설정합니다. 이는 아무 것도 표시하지 않을 수도 있고, 스크롤 바가 나타날 수도 있으며 넘친 콘텐츠가 보일 수도 있습니다.

참고 : overflow-inline 속성은 문서의 작성 방식에 따라 overflow-y 또는 overflow-x로 매핑됩니다.

구문

css
/* 키워드 값 */
overflow-inline: visible;
overflow-inline: hidden;
overflow-inline: clip;
overflow-inline: scroll;
overflow-inline: auto;

/* 전역 값 */
overflow-inline: inherit;
overflow-inline: initial;
overflow-inline: revert;
overflow-inline: revert-layer;
overflow-inline: unset;

overflow-inline 속성은 단일한 <overflow> 키워드 값으로 지정됩니다.

값

visible

콘텐츠가 잘리지 않으며 안쪽 여백 상자의 인라인 시작과 끝 가장자리를 벗어나 화면에 렌더링 될 수 있습니다.

hidden

필요한 경우 콘텐츠가 인라인 크기에 맞게 잘립니다. 이때 스크롤 바는 제공되지 않습니다.

clip

콘텐츠는 overflow-clip-margin 속성을 사용하여 정의된 요소의 오버플로우 클립 가장자리에서 잘립니다.

scroll

콘텐츠는 필요한 경우 인라인 크기의 안쪽 여백 박스에 맞춰 잘리게 됩니다. 브라우저는 실제로 콘텐츠가 잘린 여부에 관계없이 스크롤바를 표시합니다. (이렇게 하면 콘텐츠가 변경될 때 스크롤바가 나타나거나 사라지는 것을 방지할 수 있습니다.) 프린터에서는 여전히 콘텐츠가 넘치게 출력될 수 있습니다.

auto

사용자 에이전트에 따라 달라집니다. 만약 콘텐츠가 안쪽 여백 상자 안에 맞는다면, visible 과 동일하게 표시되지만, 여전히 새로운 블록 서식 문맥을 생성합니다. 데스크탑 브라우저는 콘텐츠가 넘칠 경우 스크롤 바를 제공합니다.

형식 정의

초기값auto
적용대상Block-containers, flex containers, and grid containers
상속no
계산 값as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
Animation typediscrete

형식 구문

overflow-inline = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto
이 구문은 CSS Overflow Module Level 3에 따른 최신 표준을 반영합니다. 모든 브라우저가 모든 부분을 구현한 것은 아닙니다. 지원 정보는 브라우저 호환성을 참조하세요.

예제

Inline Overflow 동작 설정

HTML

html
<ul>
  <li>
    <code>overflow-inline: hidden</code> (박스 외부에 있는 텍스트를 숨깁니다.)
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: scroll</code> (항상 스크롤 바를 추가합니다.)
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: visible</code> (필요한 경우 박스 외부에 있는 텍스트를
    표시합니다.)
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: auto</code> (대부분의 브라우저에서
    <code>scroll</code>
    과 동일합니다.)
    <div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: clip</code> (오버플로우 클립 가장자리를 기준으로 박스
    외부의 텍스트를 숨깁니다.)
    <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;
}

ê²°ê³¼

명세

Specification
CSS Overflow Module Level 3
# overflow-control

브라우저 호환성

같이 보기

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content