AAtomic CSS

overflow-x

수평(가로) 방향의 오버플로우만 제어합니다. 가로 스크롤 가능한 컨테이너(캐러셀, 넓은 테이블)에 자주 사용됩니다.

클래스 목록

클래스CSS설명
oxvoverflow-x: visible기본값. 넘치는 콘텐츠가 그대로 보임
oxhoverflow-x: hidden넘치는 콘텐츠를 잘라서 숨김
oxsoverflow-x: scroll항상 가로 스크롤바 표시
oxaoverflow-x: auto넘칠 때만 가로 스크롤바 표시
oxcoverflow-x: clip숨기되 스크롤 영역도 생성하지 않음

시각적 비교

넓은 콘텐츠가 컨테이너를 초과할 때 각 값의 동작을 비교합니다.

Visible — oxv

이 텍스트는 매우 길어서 컨테이너의 가로 영역을 초과합니다. overflow-x 속성에 따라 다르게 처리됩니다.

콘텐츠가 컨테이너 밖으로 넘침

Hidden — oxh

이 텍스트는 매우 길어서 컨테이너의 가로 영역을 초과합니다. overflow-x 속성에 따라 다르게 처리됩니다.

넘치는 부분이 잘려서 보이지 않음

Auto — oxa

이 텍스트는 매우 길어서 컨테이너의 가로 영역을 초과합니다. overflow-x 속성에 따라 다르게 처리됩니다.

넘칠 때만 가로 스크롤바가 나타남

Scroll — oxs

이 텍스트는 매우 길어서 컨테이너의 가로 영역을 초과합니다. overflow-x 속성에 따라 다르게 처리됩니다.

항상 가로 스크롤바가 표시됨

사용 예시

<!-- 가로 스크롤 가능한 테이블 -->
<div class="oxa">
  <table class="minw60rem">
    <tr><td>넓은 테이블 콘텐츠...</td></tr>
  </table>
</div>

<!-- 가로 스크롤 카드 캐러셀 -->
<div class="oxa df gap16px pb12px">
  <div class="minw28rem bg18181B p2rem br8px fs0">Card 1</div>
  <div class="minw28rem bg18181B p2rem br8px fs0">Card 2</div>
  <div class="minw28rem bg18181B p2rem br8px fs0">Card 3</div>
</div>

<!-- 넘침 방지 (코드 블록) -->
<div class="oxh maxw100p">
  <pre>매우 긴 코드 한 줄...</pre>
</div>
overflowoverflow-ywhite-space