LONG TITLE. SMALL SPACE.

Give it
room to wrap.

Your title shouldn’t push the button out.
Paste it. Squeeze the card. Take the CSS.

01 / Your title

Browser only

Max. card width320 px

Title size30 px

Wrapping guards Let the title shrink min-width: 0 Break long words anywhere

Try a sentence, a long identifier, or Chinese. The same text and size appear in both cards.

Live flex layout

FIELD NOTES 01

A title + a button.

FIELD NOTES 01

A title + a button.

The first card deliberately forces one line. The second allows wrapping; toggle the guards to see how unbroken text behaves.

03 / TAKE THE FIX

A flex row with a title and a fixed-size button. Adjust the selectors to fit your component.

CSS / current settings