Gosub overflow & clipping test

How content is clipped or scrolled: overflow values, text-overflow: ellipsis, line-clamp, clip-path, and rounded-corner clipping.

overflow values

visible — spills out

overflow: visible

hidden — clipped

overflow: hidden

scroll — always bars

overflow: scroll

auto — bars if needed

overflow: auto

Single-axis overflow

This line is intentionally very long so it does not fit and must scroll horizontally only — no wrapping allowed here at all.

overflow-x: auto + nowrap

Vertical scrolling only. Line one. Line two. Line three. Line four. Line five. Line six. Line seven. Line eight. Line nine. Line ten.

overflow-y: auto

text-overflow & line-clamp

A single line of text that is far too long to fit and gets truncated with an ellipsis.

text-overflow: ellipsis

A multi-line block clamped to three lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.

-webkit-line-clamp: 3

clip-path shapes

circle()

polygon tri

polygon hex

inset()

Rounded-corner clipping

A child with square corners, clipped by the parent's 24px border-radius + overflow: hidden.

radius clips the child