CSS
Wrapping, cortes y decoración de texto
Controla saltos de línea, palabras largas, truncado y decoración mediante white-space, overflow-wrap, word-break, hyphens y text-decoration.
- Última actualización
- Actualizada
- Nivel
- Aplicación
CSS
Controla saltos de línea, palabras largas, truncado y decoración mediante white-space, overflow-wrap, word-break, hyphens y text-decoration.
pre { white-space: pre; }
.description { white-space: normal; }Valores modernos combinan colapso y wrapping. Shorthands clásicas siguen siendo comunes:
normalnowrapprepre-wrappre-linebreak-spaces.content {
overflow-wrap: anywhere;
}Permite romper una cadena larga para evitar overflow y puede afectar min-content sizing.
break-word conserva comportamiento histórico y no siempre afecta min-content igual.
.code {
word-break: break-all;
}Rompe entre caracteres y puede perjudicar lectura. Úsalo para casos muy específicos.
keep-all modifica breaks en CJK y necesita contexto lingüístico.
.article {
hyphens: auto;
}Depende del atributo lang y diccionarios del navegador.
<html lang="es">Sin idioma correcto, la separación puede ser inexistente o errónea.
extra­ordinarioSoft hyphen aparece solo cuando se utiliza como punto de corte.
.summary {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}El patrón sigue dependiendo de compatibilidad histórica. Oculta contenido; debe existir otra forma de acceder cuando es importante.
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Solo funciona en condiciones concretas y no añade tooltip automáticamente.
.link {
text-decoration-line: underline;
text-decoration-thickness: 0.1em;
text-underline-offset: 0.18em;
text-decoration-skip-ink: auto;
}.annotation {
text-emphasis: filled circle;
}Más relevante en ciertos sistemas de escritura. No simules énfasis culturalmente específico sin conocer el idioma.
¿Por qué hyphens: auto puede no hacer nada en una página sin lang?
Porque el navegador necesita conocer el idioma para elegir reglas y diccionario de separación adecuados.
Color moderno y contraste explica espacios de color, alpha y preferencias.