Overflow

Utilities for controlling how an element handles content that is too large for the container.

Examples

.d-of-auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget.

.d-of-x-auto

.d-of-y-auto

.d-of-hidden

.d-of-x-hidden

.d-of-y-hidden

.d-of-scroll

.d-of-x-scroll

.d-of-y-scroll

.d-of-visible

.d-of-x-visible

.d-of-y-visible

.d-of-unset

<p class="d-of-auto">…</p>
<p class="d-of-x-auto">…</p>
<p class="d-of-y-auto">…</p>
<p class="d-of-hidden">…</p>
<p class="d-of-x-hidden">…</p>
<p class="d-of-y-hidden">…</p>
<p class="d-of-scroll">…</p>
<p class="d-of-x-scroll">…</p>
<p class="d-of-y-scroll">…</p>
<p class="d-of-visible">…</p>
<p class="d-of-x-visible">…</p>
<p class="d-of-y-visible">…</p>
<p class="d-of-unset">…</p>

Classes

The overflow CSS shorthand property sets the desired behavior for how content is handled when it exceeds the wrapper's bounds in both directions (x-axis and then y-axis).

Class	Output	Description
.d-of-auto	overflow: auto;	Adds scrollbars to an element when its content overflows its bounds. Scrollbars are shown only if scrolling is necessary.
.d-of-x-auto	overflow-x: auto;	Adds scrollbars to an element when its content overflows its horizontal bounds. Scrollbars are shown only if scrolling is necessary.
.d-of-y-auto	overflow-y: auto;	Adds scrollbars to an element when its content overflows its vertical bounds. Scrollbars are shown only if scrolling is necessary.
.d-of-hidden	overflow: hidden;	Content is clipped if necessary to fit into an element. No scrollbars are provided.
.d-of-x-hidden	overflow-x: hidden;	Content is clipped if necessary to fit into an element. No horizontal scrollbars are provided.
.d-of-y-hidden	overflow-y: hidden;	Content is clipped if necessary to fit into an element. No vertical scrollbars are provided.
.d-of-scroll	overflow: scroll;	Adds scrollbars to an element. Scrollbars are always shown unless always-visible scrollbars are disabled by the operating system.
.d-of-x-scroll	overflow-x: scroll;	Adds horizontal scrollbars to an element. Scrollbars are always shown unless always-visible scrollbars are disabled by the operating system.
.d-of-y-scroll	overflow-y: scroll;	Adds vertical scrollbars to an element. Scrollbars are always shown unless always-visible scrollbars are disabled by the operating system.
.d-of-visible	overflow: visible;	Prevents content within an element from being clipped both horizontally and vertically. Content that overflows the element’s bounds will be visible.
.d-of-x-visible	overflow-x: visible;	Prevents content within an element from being clipped horizontally. Content that overflows the element’s bounds will be visible.
.d-of-y-visible	overflow-y: visible;	Prevents content within an element from being clipped vertically. Content that overflows the element’s bounds will be visible.
.d-of-unset	overflow: unset;	Resets the overflow property to its initial value.

Examples #

Classes #

Examples

Classes