Skip to content
TeaCSS documentation

Overflows

Overflow, clipping, and text truncation. TeaCSS Standard reference.

This is the Standard reference for overflows. It follows the authored TeaCSS vocabulary at source revision fa3709a for package version 0.7.1. Each value list gives finite examples and named values for its prefixes. A bracket or variable example demonstrates that open form for the same prefix; the listed arbitrary literals are samples, not every accepted literal. Check the Storybook token reference for more examples, and do not infer support from a different prefix.

overflow

Interactive example. Prefixes: overflow, overflow-x, overflow-y, overflow-inline, overflow-block. Example: overflow:auto. It emits overflow:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.

Documented values (5)

auto, hidden, clip, visible, scroll

overflow-anchor

Interactive example. Prefixes: overflow-anchor. Example: overflow-anchor:auto. It emits overflow-anchor:auto;.

Documented values (2)

auto, none

overflow-clip-margin

Interactive example. Prefixes: overflow-clip-m, overflow-clip-m-x, overflow-clip-m-y, overflow-clip-m-inline, overflow-clip-m-block, overflow-clip-m-t, overflow-clip-m-r, overflow-clip-m-b, overflow-clip-m-l, overflow-clip-m-s, overflow-clip-m-e, overflow-clip-m-u, overflow-clip-m-n. Example: overflow-clip-m:0. It emits overflow-clip-margin:0px;.

Documented values (6)

0, 2, 4, content-box, [1rem], [content-box_2px]

text-overflow

Interactive example. Prefixes: text-overflow. Example: text-overflow:clip. It emits text-overflow:clip;.

Documented values (2)

clip, ellipsis

line-clamp

Interactive example. Maturity: advanced. Rule type: composite. Browser support: Uses the legacy WebKit clamp composite utility; it is not the standard line-clamp shorthand.

Prefixes: line-clamp. Example: line-clamp:1. It emits -webkit-line-clamp:1;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;.

Documented values (9)

1, 2, 3, 4, 5, 6, 7, 8, 9