Length is constrained by layout but must not give up clarity

What it is

Button width is finite. German, Finnish, and a Chinese phrase plus its object will all burst an English mock. Layout may cap length; it may not take clarity as the sacrifice: chopping to “Del…”, shrinking to OK, or wrapping a primary into something that no longer looks like a button all trade typesetting against the specific verb. Length yields to layout. Clarity does not.

Why it happens

Truncation breaks word boundaries. People recognize verbs from onsets and word shape; an ellipsis often eats the object or the negation (Don't save → Don't…), and the stump collides with a neighbor. Wrapping splits one verb across two fixations; a scan of the primary catches “Delete” on the first line and loses “permanently” under a home indicator. Shrinking type fits characters and pushes both contrast and reading below threshold. Translation expansion is expected physics (many languages run 30%+ longer than English). Fixing width on Save pretends clarity already passed in the source language. Layout pressure then shoves people toward generic words, because OK is always shorter—that is the concrete path by which clarity is sacrificed.

Studying it

Prepare short, medium, and long labels for the same action (including one width that will truncate). Run a choice task on a target language and a narrow viewport. Record whether truncated labels remain distinct.

Independent variables: available width, wrapping allowed, language, truncation point (keep onset vs keep ending). Dependent variables: identification accuracy, confusion between two truncated buttons, switches onto a shorter wrong button.

Measuring width on English mocks misses expansion. Add at least one long-word language, or pad English verbs to the translated character count.

Where it stops holding

An icon-plus-text button that goes icon-only in extreme narrowness fails by icon recognition, not by truncation. System permission dialogs truncate on the OS side; the app cannot fix length and can only front-load the verb. A countdown label (“Skip in 5s”) changes length in time; reserve layout for the longest state, not for the word Skip. Slogan primaries (“Start your journey”) already spend length on mood; clarity may never have been the goal, but they still should not clip to “Start your…”.

Applying it

• Reserve minimum width against the longest target language, not the English mock. Allow growth; do not eat the verb into an ellipsis.
• When shortening is mandatory, drop modifiers and objects recoverable from context first; keep the verb and the negation (Don't save, not Save…).
• Do not cram by shrinking type. Two lines at most on a wide desktop button; keep a mobile primary on one line.
• Verify on the narrowest device and longest language. After covering ellipses, the action should still be readable. If two buttons collapse to indistinguishable “Conf… / Can…”, layout has eaten clarity.

Related

• Within the group: E1.06.1 A button label should name the action that will happen, not a generic word · E1.06.2 Label and situation together complete the sentence
• Adjacent: E1.15 Button width and flex · S1 Language and text · F4 Typography
• Search terms: label truncation · string expansion · button width