CSS: “text-overflow”: X no es un valor válido para “text-overflow”.

La propiedad CSS text-overflow controla cómo se indica a los usuarios el contenido desbordado que no se muestra. Se aplica cuando el desbordamiento de un elemento está oculto (ej., overflow: hidden) y el contenido excede la caja del elemento. La propiedad acepta valores específicos, y usar cualquier cosa fuera del conjunto permitido — como una palabra clave mal escrita, una cadena sin comillas, o un valor inventado — desencadenará este error de validación.

Valores aceptados

La propiedad text-overflow acepta los siguientes valores:

• clip — Trunca el texto en el borde del área de contenido. Los caracteres pueden ser cortados a mitad de glifo. Este es el valor por defecto.
• ellipsis — Muestra un carácter de puntos suspensivos (…) para indicar texto cortado.
• Un <string> personalizado — Una cadena entre comillas para mostrar en el punto de corte (ej., " [..]"). Ten en cuenta que el soporte del navegador para cadenas personalizadas es limitado.
• Valores globales de CSS — inherit, initial, revert, revert-layer, y unset.

La propiedad puede tomar uno o dos valores. Si se proporciona un valor, especifica el comportamiento de desbordamiento para el final de la línea (el extremo derecho para texto de izquierda a derecha, el extremo izquierdo para texto de derecha a izquierda). Si se proporcionan dos valores, el primero controla el extremo izquierdo de la línea y el segundo controla el extremo derecho. La sintaxis de dos valores tiene soporte limitado en navegadores.

Errores comunes que desencadenan este error incluyen:

• Escribir mal ellipsis (ej., elipsis, ellipses).
• Usar un valor de una propiedad diferente (ej., hidden, scroll, auto).
• Usar una cadena personalizada sin comillas en lugar de una correctamente entrecomillada.
• Usar un valor numérico o de longitud (ej., 10px), que no es válido para esta propiedad.

Por qué esto importa

Los valores CSS inválidos son ignorados por los navegadores, lo que significa que la propiedad volverá a su valor por defecto (clip) en lugar de comportarse como pretendías. Esto puede llevar a que el texto sea cortado abruptamente sin ningún indicador visual, perjudicando la legibilidad y la experiencia del usuario. Corregir errores de validación también asegura que tus hojas de estilo sean limpias, predecibles y mantenibles.

Ejemplos

Incorrecto — palabra clave mal escrita

/* "elipsis" no es un valor válido para text-overflow */
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: elipsis;
}

Incorrecto — valor de otra propiedad

/* "hidden" es un valor de overflow, no de text-overflow */
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: hidden;
}

Incorrecto — cadena personalizada sin comillas

/* Las cadenas personalizadas deben estar entre comillas */
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: [more];
}

Correcto — usando ellipsis

.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Correcto — usando clip (el valor por defecto)

.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

Correcto — usando una cadena personalizada entre comillas

.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: " [..]";
}

Correcto — sintaxis de dos valores

/* El extremo izquierdo usa ellipsis, el extremo derecho usa una cadena personalizada */
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis " [..]";
}

Ten en cuenta que text-overflow por sí sola no fuerza que ocurra el desbordamiento. Para hacer que el texto realmente se trunque, típicamente necesitas overflow: hidden (u otro valor de desbordamiento no visible) y white-space: nowrap en el elemento. La propiedad text-overflow solo controla cómo se señala visualmente el contenido cortado.

Más información:

MDN Reference

MDN: text-overflow

→