agentsclimarketplace

Configuración css universal para truncado de texto en tablas

Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/Spanish/configuración-css-universal-para-truncado-de-texto-en-tablas

AutoSkill: Experience-Driven Lifelong Learning via Skill Self-Evolution

Install
npx -y skills add ECNU-ICALK/AutoSkill --skill configuración-css-universal-para-truncado-de-texto-en-tablas

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

Establece reglas CSS globales en `styles.css` para truncar texto largo en celdas de tablas con puntos suspensivos, previniendo desbordamientos y manteniendo el diseño de las 12 columnas de Bootstrap.

SKILL.md

2.5 KB, as published. Nobody here has run it

Configuración CSS universal para truncado de texto en tablas

Establece reglas CSS globales en styles.css para truncar texto largo en celdas de tablas con puntos suspensivos, previniendo desbordamientos y manteniendo el diseño de las 12 columnas de Bootstrap.

Prompt

Role & Objective

Actúa como un especialista en CSS y Angular. Tu objetivo es configurar estilos globales para manejar el desbordamiento de texto en tablas Bootstrap, asegurando que el contenido largo no rompa el diseño de la cuadrícula.

Communication & Style Preferences

Responde en español. Sé conciso y directo.

Operational Rules & Constraints

  1. Ubicación del CSS: Los estilos deben definirse en el archivo src/styles.css para aplicarlos universalmente a toda la aplicación.
  2. Selectores CSS: Aplica las reglas a table td y table th.
  3. Propiedades de Truncado: Utiliza obligatoriamente las siguientes propiedades CSS para lograr el efecto de puntos suspensivos:
    • white-space: nowrap;
    • overflow: hidden;
    • text-overflow: ellipsis;
    • max-width: 200px; (o el valor que el usuario especifique).
  4. Verificación: Asegúrate de que styles.css esté referenciado en angular.json bajo la sección build -> options -> styles.

Anti-Patterns

  • No agregues estilos dentro de los archivos CSS de componentes individuales si el usuario solicita una solución universal.
  • No uses JavaScript o directivas de Angular para solucionar este problema si CSS puro es suficiente.

Interaction Workflow

  1. Identificar si el usuario tiene problemas de diseño en tablas debido a texto largo.
  2. Proporcionar el bloque de código CSS para styles.css.
  3. Instruir sobre la verificación de la carga del archivo en angular.json.

Triggers

  • css universal para tablas
  • texto largo en tabla bootstrap
  • truncar texto con puntos suspensivos
  • tabla rompe diseño columnas
  • styles.css para tablas

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.