Tutorials
Claude Opus 5.5: fix product titles that hide the variant
Ask Claude Opus 5.5 to preserve the part of a product title that distinguishes one variant from another before adding an ellipsis.
Ask Claude Opus 5.5 to preserve the part of a product title that distinguishes one variant from another before adding an ellipsis. A neat card is not useful if “250 ml” and “400 ml” disappear and two different products look identical. Review the content, width constraint, and path to the full name together.
A responsive-title question shows why a fixed pixel width is not a general solution. It is historical community evidence, not a test of today's browsers. This article proposes a review process, not an Opus benchmark.
Choose a display policy before changing CSS
| Content | Preferred treatment | Acceptance check |
|---|---|---|
| Variant or pack quantity | Keep visibly available | Similar products remain distinguishable |
| Decorative marketing phrase | Shorten approved display copy | Full catalog name stays unchanged |
| Long unbroken model code | Allow deliberate wrapping | Code remains copyable and complete |
| Secondary description | Consider truncation with a full-text route | Touch and keyboard users can reveal it |
MDN's text-overflow reference explains that ellipsis does not create overflow by itself. Inspect the actual layout constraint first. A flex child may also need room to shrink; changing text without inspecting the parent can leave the same defect.
Work through a two-variant example
Suppose two fictional catalog names are `Navo insulated travel cup — 250 ml` and `Navo insulated travel cup — 400 ml`. Both become `Navo insulated travel…` in a narrow card. Keep the source names intact, but consider an approved display heading “Navo travel cup” with a separate visible capacity field. Capacity belongs to the identity, not a hover-only tooltip.
For a single-line secondary label inside a constrained flex layout, this is a starting pattern, not a universal card design:
.card-copy { min-width: 0; }
.secondary-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}The parent still needs a real available width. This snippet does not implement multiline truncation or a full-text control. Avoid clipping the focus outline of an interactive label: apply clipping to an inner text element and inspect the surrounding link. Test long words, spaces, punctuation, and RTL names with actual fonts.
Copyable Opus brief
Pair this task with the official Opus guidance:
Review these product cards using their complete catalog names, variant fields, markup, computed styles, and screenshots at 320, 390, and 1440 CSS pixels.
Identify which hidden words distinguish products. Preserve the source catalog strings. Propose an approved short display name only when the omitted meaning remains visible elsewhere. Do not hide capacity, pack count, compatibility, or model suffix by default.
Trace the width constraint through grid or flex parents. Separate single-line ellipsis from multiline clamping and ordinary wrapping. Return the smallest patch plus examples with long words and RTL text. Keep link focus indicators visible.
Provide a full-name path available to touch and keyboard users; do not rely on the title attribute alone. Test zoom, loaded fonts, and two neighboring variants. Return observed defects, proposed changes, and tests still pending. Do not claim screenshots were tested without evidence.Verify identity, not just alignment
At each requested width, compare neighboring products without opening them. A shopper should be able to tell which variant is which. Then open the detail route and confirm the complete name matches the source. Test the full-text control by touch and keyboard if one exists; a hover-only treatment is insufficient for that interaction goal.
Increase text size or browser zoom and repeat. Let cards grow when necessary rather than forcing an identical height that removes essential information. Record the longest tested name and exact variant fields so later content imports can reuse the cases.
Remaining questions
**Should every title be one line?** No. The product identity and available space decide the policy.
**Can a character limit predict fit?** No. Fonts, characters, language, and available width affect rendered length.
**Should the catalog name be rewritten?** Keep it unchanged unless a separate catalog-editing decision is approved.
After the card communicates the right variant, use those same confirmed names and references in Panelly Studio for campaign images. For mixed Arabic and Latin identifiers, continue with the RTL product-code review.
