Unintended Overflow Examples

This page demonstrates various cases of content overflowing its container without proper handling.

Horizontal overflow - nowrap text

Text with white-space: nowrap in a fixed-width container

This is a very long text that will overflow horizontally because it cannot wrap to the next line.

Vertical overflow - fixed height

Content in a fixed-height container without overflow handling

This container has a fixed height of 60px but contains more text than can fit. The text will overflow vertically beyond the container bounds without being clipped or scrollable.

Long word overflow

A very long word without word-break handling

Supercalifragilisticexpialidocious

URL overflow

A long URL that doesn't break

https://example.com/very/long/path/that/will/overflow/the/container/bounds

Properly Handled (Should NOT be flagged)

overflow: hidden

Content is clipped at container boundary

This text is clipped because overflow is hidden.

overflow: auto (scrollable)

Container shows scrollbar when needed

This container allows scrolling. The content can be accessed by scrolling, which is an acceptable way to handle overflow.

text-overflow: ellipsis

Text is truncated with ellipsis

This long text will be truncated with an ellipsis at the end.

word-wrap: break-word

Long words are broken to fit

Supercalifragilisticexpialidocious