AAtomic CSS

overflow-x

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스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 속성에 따라 다르게 처리됩니다.

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

사용 예시

<!-- Horizontally scrollable table -->
<div class="oxa">
  <table class="minw60rem">
    <tr><td>Wide table content...</td></tr>
  </table>
</div>

<!-- Horizontal scroll card carousel -->
<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>

<!-- Overflow prevention (code block) -->
<div class="oxh maxw100p">
  <pre>A very long line of code...</pre>
</div>
overflowoverflow-ywhite-space