[ @sdxc/u/overflow ]

overflow

Applies overflow: clip, the modern alternative to overflow: hidden.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { clip } from "@sdxc/u/overflow";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.clip()`	`css({ overflow: "clip" })`

Examples

Basic example

Use clip() to cut off any content that overflows an element, with no way to scroll to it, not even from script:

<div mix={[clip(), is(64), bs(32), ...]}>
	<div mix={[is(96), bs(48), ...]} />
</div>

Clipping media to rounded corners

Add clip() to a rounded card so the image at its edge follows its corners:

Mountain lake at noon

<article mix={[clip(), rounded("xl"), is(64), border({ color: "neutral.border", width: 1 })]}>
	<img src={...} alt="" mix={[is("100%"), bs(32), fit()]} />
	<p mix={[p(4), ...]}>Mountain lake at noon</p>
</article>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.clip())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.clip())

Signature

u.clip()