Overflow

Overflow utility CSS classes can be used to control the overflow of content within elements.

In this demo four cards demonstrate overflow classes: rz-overflow-auto (scrolls only when needed), rz-overflow-scroll (always shows scrollbars), rz-overflow-hidden (clips content), and rz-overflow-visible (content overflows the container), with responsive variants available like rz-overflow-{breakpoint}-scroll.

This container has .rz-overflow-auto overflow class applied.
This container has .rz-overflow-scroll overflow class applied.
This container has .rz-overflow-hidden overflow class applied.
This container has .rz-overflow-visible overflow class applied.

If you need to specify how the text content should wrap, use rz-text-wrap, rz-text-nowrap, and rz-text-truncate. See the Text Wrap demo.

Responsive overflow link

You can set a specific overflow value for different screen sizes by inserting the respective breakpoint abbreviation.

For example .rz-overflow-{breakpoint}-scroll, where {breakpoint} can be xs, sm, md, lg, xl, xx.

Learn more about Breakpoints.

✨ 오늘의 명언 & 마음의 양식

“꿈을 꿀 수 있다면, 그것을 이룰 수 있다.”

— 월트 디즈니 (디즈니 창립자)
On this page

Demos Configuration

Premium Themes

  • Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark

Free Themes

  • Material
  • Material Dark
  • Standard
  • Standard Dark
  • Default
  • Dark
  • Humanistic
  • Humanistic Dark
  • Software
  • Software Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙