Agent Skills › ECNU-ICALK/AutoSkill › Configuración CSS universal para truncado de texto en tablas

Configuración CSS universal para truncado de texto en tablas

GitHub

配置全局 CSS 以截断 Bootstrap 表格中的长文本，防止布局溢出。通过设置 nowrap、hidden 和 ellipsis 属性，确保表格列宽固定且内容显示省略号，保持页面整洁。

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

触发场景

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

安装

npx skills add ECNU-ICALK/AutoSkill --skill Configuración CSS universal para truncado de texto en tablas -g -y

更多选项

非标准路径

npx skills add https://github.com/ECNU-ICALK/AutoSkill/tree/main/SkillBank/ConvSkill/Spanish/configuración-css-universal-para-truncado-de-texto-en-tablas -g -y

不安装直接使用

npx skills use ECNU-ICALK/AutoSkill@Configuración CSS universal para truncado de texto en tablas

指定 Agent (Claude Code)

npx skills add ECNU-ICALK/AutoSkill --skill Configuración CSS universal para truncado de texto en tablas -a claude-code -g -y

安装 repo 全部 skill

npx skills add ECNU-ICALK/AutoSkill --all -g -y

预览 repo 内 skill

npx skills add ECNU-ICALK/AutoSkill --list

SKILL.md

Frontmatter

{
    "id": "1d2772b7-db65-4113-b781-4b4f187a8a12",
    "name": "Configuración CSS universal para truncado de texto en tablas",
    "tags": [
        "angular",
        "css",
        "bootstrap",
        "tablas",
        "estilos globales"
    ],
    "version": "0.1.0",
    "triggers": [
        "css universal para tablas",
        "texto largo en tabla bootstrap",
        "truncar texto con puntos suspensivos",
        "tabla rompe diseño columnas",
        "styles.css para tablas"
    ],
    "description": "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."
}

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

Ubicación del CSS: Los estilos deben definirse en el archivo src/styles.css para aplicarlos universalmente a toda la aplicación.
Selectores CSS: Aplica las reglas a table td y table th.
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).
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

Identificar si el usuario tiene problemas de diseño en tablas debido a texto largo.
Proporcionar el bloque de código CSS para styles.css.
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

版本历史

94c47ca 当前 2026-07-24 12:45

元信息

文件数: 0
版本: 94c47ca
Hash: 500663e5
收录时间: 2026-07-24 12:45

Configuración CSS universal para truncado de texto en tablas