Overlong copy in a fixed-width button truncates or wraps

What it is

Lock a button to a pixel width while copy grows with language and object, and extra characters have two exits: truncate or wrap. Truncation eats endings, and a pair may collapse to indistinguishable “Delete th… / Delete al…”. Wrap turns one key into a two-line stump, shoves the next row, or suddenly tallens the primary. Fixed width is a bet against an uncontrollable string. Losing the bet destroys clarity in the layout.

Why it happens

Fixed width treats the string as a still graphic. Real strings move: interpolation (Delete 12 items), syntax (German verbs at the end), plurals. Truncation usually keeps the onset, while what distinguishes a pair is often the ending (this file / all files). Wrap splits on spaces; Chinese may split mid-word, or a spaceless clause overflows. Height changes crack a sticky footer, a dialog footer, a group’s shared outline. Loading then swaps in a short word, height snaps back, and the layout jumps again. Fixed width is usable, but it turns overflow into an explicit failure mode that has to be chosen, not “we laid it out.”

Studying it

Fill one fixed width with short, medium, long, and spaceless-long strings, under truncation and wrap. Record whether paired buttons stay distinct, footer height change, and whether loading jumps again.

Independent variables: width, overflow strategy, language, interpolation. Dependent variables: pair confusion, layout shift, change in tap-target height.

Sampling only a two-character Save will conclude fixed width is harmless. Use the longest interpolated sentence production will actually emit.

Where it stops holding

Icon buttons are already fixed width and have no copy to overflow. Keys on a numeric pad must be fixed; the copy is one character. Inline table buttons sometimes must be fixed to align a column; then do not interpolate into the button—put the object in another column. Marquee-scrolling copy avoids truncation and makes the button unhittable; do not use it.

Applying it

• Avoid dead widths. When equal width is needed, use a minimum plus growth, not a locked maximum.
• If width must be fixed, wrap and reserve two lines of height, or keep growing objects out of the button.
• If truncating, paired buttons must remain distinct after the cut; do not put the distinguishing token on the side the ellipsis eats.
• Verify by pumping the longest locale and interpolations such as Delete 999 items, and record the footer. Indistinguishable ellipses, or height that pushes Cancel off screen, means fixed width lost.

Related

• Within the group: E1.15.1 Hugging content and filling the container mean different things · E1.15.3 A mobile primary often fills the width to make reaching easier · E1.15.4 Buttons in one group need visually aligned widths
• Adjacent: E1.06 Button labels · S1 Language and text · E1.09 Loading buttons
• Search terms: text overflow · fixed width button · string interpolation