Tutoriales
Claude Opus 5.5: corrige títulos de producto que ocultan la variante
Antes de añadir puntos suspensivos, pide a Claude Opus 5.5 que conserve la parte que distingue una variante de otra.
Antes de añadir puntos suspensivos, pide a Claude Opus 5.5 que conserve la parte que distingue una variante de otra. Una tarjeta ordenada no ayuda si desaparecen “250 ml” y “400 ml” y dos productos parecen iguales. Revisa juntos el contenido, el ancho disponible y el acceso al nombre completo.
Una pregunta sobre títulos adaptables muestra por qué un ancho fijo no resuelve todos los casos. Es evidencia comunitaria histórica, no una prueba de los navegadores actuales. Este artículo propone una revisión, no una evaluación de Opus.
Decide la política antes de cambiar CSS
| Contenido | Tratamiento preferido | Comprobación |
|---|---|---|
| Variante o cantidad del paquete | Mantener visible | Distinguir productos parecidos |
| Frase promocional decorativa | Acortar el texto visible aprobado | Conservar el nombre de catálogo |
| Código largo sin espacios | Permitir saltos deliberados | Copiar el código completo |
| Descripción secundaria | Considerar recorte con acceso al total | Revelarla con teclado y tacto |
La referencia de text-overflow de MDN explica que la elipsis no provoca por sí misma el desbordamiento. Revisa primero la restricción real. Un hijo flex puede necesitar permiso para encogerse; cambiar el texto sin revisar el padre puede dejar el mismo defecto.
Ejemplo con dos variantes
Supón los nombres ficticios `Navo insulated travel cup — 250 ml` y `Navo insulated travel cup — 400 ml`. Ambos quedan como `Navo insulated travel…` en una tarjeta estrecha. Conserva los originales, pero considera un título visible aprobado, “Vaso de viaje Navo”, y un campo de capacidad siempre visible. La capacidad identifica el producto; no debe depender de una ayuda al pasar el puntero.
Para una etiqueta secundaria de una línea dentro de un diseño flex restringido, este patrón es un punto de partida, no un diseño universal:
.card-copy { min-width: 0; }
.secondary-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}El padre todavía necesita un ancho disponible real. El fragmento no implementa truncado multilínea ni un control para ver el texto completo. No recortes el indicador de foco de una etiqueta interactiva: recorta el texto interior y revisa el enlace exterior. Prueba palabras largas, espacios, puntuación y nombres RTL con las fuentes reales.
Instrucción completa para Opus
Combínala con la guía oficial de Opus.
Revisa estas tarjetas con nombres completos del catálogo, campos de variante, marcado, estilos calculados y capturas a 320, 390 y 1440 píxeles CSS.
Identifica las palabras ocultas que distinguen productos. Conserva las cadenas originales. Propón un nombre visible corto para aprobación solo si el significado omitido permanece visible en otro sitio. No ocultes por defecto capacidad, cantidad, compatibilidad o sufijo de modelo.
Rastrea el ancho por los padres grid o flex. Separa elipsis de una línea, limitación multilínea y salto normal. Devuelve el parche mínimo y ejemplos con palabras largas y texto RTL. Conserva los indicadores de foco de los enlaces.
Ofrece acceso al nombre completo mediante tacto y teclado; no dependas solo del atributo title. Prueba zoom, fuentes cargadas y dos variantes vecinas. Separa defectos observados, cambios propuestos y pruebas pendientes. No afirmes haber probado capturas sin evidencia.Verifica la identidad, además de la alineación
En cada ancho, compara productos vecinos sin abrirlos. El comprador debe distinguir la variante. Después abre el detalle y coteja el nombre completo con el original. Si existe un control para desplegar texto, úsalo con tacto y teclado; depender del puntero no cumple ese objetivo.
Aumenta el texto o el zoom y repite. Deja crecer las tarjetas cuando haga falta en vez de imponer una altura idéntica que elimine datos esenciales. Registra el nombre más largo probado y los campos exactos para reutilizarlos en futuras importaciones.
Preguntas pendientes
**¿Todos los títulos deben ocupar una línea?** Lo deciden la identidad del producto y el espacio.
**¿Un límite de caracteres predice el ajuste?** No: fuente, caracteres, idioma y ancho influyen.
**¿Hay que reescribir el catálogo?** Consérvalo salvo que se apruebe una edición independiente.
Cuando la tarjeta comunique la variante correcta, usa esos mismos nombres y referencias en Panelly Studio para crear imágenes. Para identificadores con árabe y letras latinas, consulta la revisión de códigos RTL.
