Demostración de Propiedades CSS

Sección: text-overflow

Valor	Texto normal	Texto con la propiedad
clip	Este es un texto muy largo que debería ser recortado visiblemente.	Este es un texto muy largo que debería ser recortado visiblemente.
ellipsis	Este es un texto muy largo que debería ser recortado visiblemente.	Este es un texto muy largo que debería ser recortado visiblemente.

Sección: white-space

Valor	Texto normal	Texto con la propiedad
normal (por defecto)	Este texto tiene saltos de línea y espacios extra.	Este texto tiene saltos de línea y espacios extra.
nowrap	Este texto tiene saltos de línea y espacios extra.	Este texto tiene saltos de línea y espacios extra.
pre	Este texto tiene saltos de línea y espacios extra.	Este texto tiene saltos de línea y espacios extra.
pre-wrap	Este texto tiene saltos de línea y espacios extra.	Este texto tiene saltos de línea y espacios extra.
pre-line	Este texto tiene saltos de línea y espacios extra.	Este texto tiene saltos de línea y espacios extra.

Sección: overflow-wrap

Valor	Texto normal	Texto con la propiedad
normal (por defecto)	TextoSuperLargoSinEspaciosQuePuedeRomperElDiseño	TextoSuperLargoSinEspaciosQuePuedeRomperElDiseño
anywhere	TextoSuperLargoSinEspaciosQuePuedeRomperElDiseño	TextoSuperLargoSinEspaciosQuePuedeRomperElDiseño
break-word	TextoSuperLargoSinEspaciosQuePuedeRomperElDiseño	TextoSuperLargoSinEspaciosQuePuedeRomperElDiseño

Sección: word-break

Valor	Texto normal	Texto con la propiedad
normal (por defecto)	TextoSuperLargoSinEspaciosQuePuedeRomperElDiseño	TextoSuperLargoSinEspaciosQuePuedeRomperElDiseño
break-all	TextoSuperLargoSinEspaciosQuePuedeRomperElDiseño	TextoSuperLargoSinEspaciosQuePuedeRomperElDiseño
keep-all	TextoSuperLargoSinEspaciosQuePuedeRomperElDiseño	TextoSuperLargoSinEspaciosQuePuedeRomperElDiseño

Relación entre overflow-wrap y word-break

overflow-wrap y word-break trabajan en equipo para controlar cómo el navegador maneja las palabras largas o difíciles de dividir cuando el texto se ajusta dentro de un contenedor.

Propiedad	Rol principal
`overflow-wrap`	Previene el desbordamiento permitiendo romper palabras solo cuando es necesario.
`word-break`	Define las reglas de cómo se puede romper una palabra, incluso si no hay necesidad de ajuste.

Usar un cuadro de Punnett para cruzar overflow-wrap y word-break es una forma genial de analizar combinaciones. A continuación te muestro una tabla con los 9 cruces posibles y te explico para qué sirve cada uno, si es útil o no, y en qué casos se suele usar.

`overflow-wrap word-break`	`normal`	`break-all`	`keep-all`
`normal`	✅ Por defecto. No rompe palabras largas. Solo útil si sabes que no habrá desbordes. Poco usado en UI modernas.	⚠ Puede romper palabras sin necesidad. Rompe cada carácter si es necesario. Útil en idiomas sin espacios o tablas.	🔒 Evita cualquier ruptura. Útil solo si quieres mantener palabras intactas en idiomas tipo coreano.
`anywhere`	✅ Rompe en cualquier parte solo si hay desbordamiento. Muy útil para URLs o cadenas sin espacios.	⚠ Demasiado agresivo. Rompe cualquier parte aunque no sea necesario. Úsalo con cuidado.	❌ Contradictorio. anywhere quiere romper, keep-all quiere evitarlo. No tiene sentido práctico.
`break-word`	✅ Recomendado. Rompe solo si es necesario, respetando límites lógicos. Ideal para la mayoría de interfaces.	⚠ Similar a break-all, pero más permisivo que anywhere + break-all. Úsalo si quieres forzar ruptura.	❌ Ineficiente. Uno quiere romper, otro evitar. No se recomienda.

Resumen visual

`overflow-wrap word-break`	`normal`	`break-all`	`keep-all`
`normal`	❌ Desborda	⚠ Útil en asiáticos	✅ Mantener texto intacto
`anywhere`	✅ Ideal URLs	⚠ Muy agresivo	❌ Incoherente
`break-word`	✅ Más usado	⚠ Forzoso	❌ Incoherente

Sección: word-spacing

Valor	Texto normal	Texto con la propiedad
normal (por defecto)	Texto con espaciado normal	Texto con espaciado normal
5px	Texto con espaciado de 5px	Texto con espaciado de 5px

Sección: text-decoration

Valor	Texto normal	Texto con la propiedad
none (por defecto)	Texto sin decoración	Texto sin decoración
underline	Texto subrayado	Texto subrayado
line-through	Texto tachado	Texto tachado
overline	Texto con línea arriba	Texto con línea arriba

Sección: text-transform

Valor	Texto normal	Texto con la propiedad
none (por defecto)	Texto Sin Cambios	Texto Sin Cambios
capitalize	texto transformado	texto transformado
uppercase	texto transformado	texto transformado
lowercase	TEXTO TRANSFORMADO	TEXTO TRANSFORMADO

Sección: text-align

Valor	Texto normal	Texto con la propiedad
left (por defecto)	Texto alineado a la izquierda	Texto alineado a la izquierda
center	Texto centrado	Texto centrado
right	Texto alineado a la derecha	Texto alineado a la derecha
justify	Texto justificado en ambos extremos, Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur eaque necessitatibus minima. Adipisci vitae numquam corrupti harum suscipit exercitationem velit earum laudantium dolor officia, provident voluptatem. Et distinctio nam ex!	Texto justificado en ambos extremos, Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur eaque necessitatibus minima. Adipisci vitae numquam corrupti harum suscipit exercitationem velit earum laudantium dolor officia, provident voluptatem. Et distinctio nam ex!

Sección: line-height

Valor	Texto normal	Texto con la propiedad
normal (por defecto)	Primera línea. Segunda línea.	Primera línea. Segunda línea.
2	Primera línea. Segunda línea.	Primera línea. Segunda línea.

Sección: letter-spacing

Valor	Texto normal	Texto con la propiedad
normal (por defecto)	Espaciado normal	Espaciado normal
5px	Espaciado de 5px	Espaciado de 5px