实用教程
用 Claude Opus 5.5 修复商品标题截断后看不出款式的问题
在加省略号之前，让 Claude Opus 5.5 先保住区分商品款式的关键信息。如果“250 ml”和“400 ml”都被截掉，两种商品看起来一模一样，再整齐的卡片也没用。应把文案、宽度约束和查看完整名称的路径一起审查。
在加省略号之前，让 Claude Opus 5.5 先保住区分商品款式的关键信息。如果“250 ml”和“400 ml”都被截掉，两种商品看起来一模一样，再整齐的卡片也没用。应把文案、宽度约束和查看完整名称的路径一起审查。
一个响应式标题问题说明固定像素宽度不是通用解法。这是历史社区需求，不是对当前浏览器的测试。本文提出审查方法，不是 Opus 性能评测。
先决定怎么显示，再改 CSS
| 内容 | 优先处理方式 | 验收点 |
|---|---|---|
| 款式或包装数量 | 保持直接可见 | 相近商品仍能区分 |
| 修饰性营销用语 | 使用确认过的短显示文案 | 目录中的完整名称不变 |
| 连续很长的型号 | 有意识地允许换行 | 型号完整且可复制 |
| 次要说明 | 可截断，但提供全文入口 | 触屏和键盘都能展开 |
MDN 的 text-overflow 文档说明，省略号本身不会制造溢出。先检查真实布局约束。flex 子项也可能需要允许收缩；不看父级，只改文本，问题可能原样保留。
用两个款式走一遍
假设两个虚构目录名称是 `Navo insulated travel cup — 250 ml` 和 `Navo insulated travel cup — 400 ml`，窄卡片中都变成 `Navo insulated travel…`。保留原始名称，可以考虑经确认的显示标题“Navo 随行杯”，另加直接可见的容量字段。容量属于商品身份，不应只在悬停提示里出现。
对于宽度受限的 flex 布局中的单行次要标签，可以从以下模式开始，它不是通用卡片设计：
.card-copy { min-width: 0; }
.secondary-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}父级仍须提供实际可用宽度。代码没有实现多行截断或全文控件。不要裁掉交互标签的焦点轮廓：可将裁切放在内部文字元素上，同时检查外层链接。使用实际字体测试长单词、空格、标点和从右到左的名称。
可复制的 Opus 任务说明
结合官方 Opus 指南使用：
根据商品完整目录名称、款式字段、标记、生效样式和 320、390、1440 CSS 像素截图，审查这些商品卡片。
找出被隐藏但能区分商品的词。保留原始目录字符串。只有被省略的含义已在其他位置直接可见时，才建议待确认的短显示名。不要默认隐藏容量、包装数量、兼容性或型号后缀。
沿 grid 或 flex 父级追踪宽度约束。区分单行省略、多行截断和普通换行。返回最小补丁及长单词、RTL 文本示例。保证链接焦点指示可见。
提供触屏和键盘都可用的完整名称入口，不要仅依赖 title 属性。测试缩放、字体加载后的状态和相邻两个款式。返回已观察问题、建议修改和待执行测试；没有依据时，不要声称已经测试截图。验收商品身份，不只看是否对齐
在每个指定宽度下，不打开详情就比较相邻商品，确认买家能分辨款式。再打开详情，核对完整名称与来源一致。如果提供了展开控件，用触屏和键盘分别操作；仅靠悬停不满足这个交互目标。
放大文字或浏览器后再检查。必要时让卡片变高，不要为了统一高度删掉关键信息。记录测试过的最长名称和确切款式字段，便于后续导入新文案时复用。
还需要决定什么
**所有标题都该只占一行吗？** 不应如此，取决于商品身份信息和可用空间。
**字符数限制能预测是否放得下吗？** 不能，字体、字符、语言和实际宽度都会影响长度。
**要改商品目录名称吗？** 保持不变，除非另行确认了目录编辑需求。
卡片准确表达款式后，在 Panelly Studio 中使用同一组确认名称和参考图制作广告图片。若名称混有阿拉伯语与拉丁字母，可继续参考 RTL 商品代码审查。
