Efectos de Texto CSS

En este artículo aprenderemos sobre las siguientes propiedades:

• text-overflow
• word-wrap
• word-break
• writing-mode

Desbordamiento de Texto CSS

La propiedad text-overflow especifica como se debe especificar al usuario el contenido desbordado que no se muestra.

Esto es un ejemplo de contenido mayor que sus contenedor pero es visible su desbordamiento:

Esto es un texto demasiado largo para su contenedor

Esto se puede recortar para ocultar el contendo desbordado:

Esto es un texto demasiado largo para su contenedor

o se puede representar como una elipsis (...):

Esto es un texto demasiado largo para su contenedor

p {
  white-space: nowrap;
  width: 230px;
  border: thin solid gray; 
}
p.prueba1 {
  over-flow: visible;
}
p.prueba2 {
  overflow: hidden;
  text-overflow: clip;
}
p.prueba3 {
  overflow: hidden;
  text-overflow: ellipsis;
}

Envolver palabras CSS

La propiedad word-wrap permite que palabras demasiado largas puedan ser divididas y ajustar a la siguiente línea.

Sí una palabra es demasiado larga para caber en área, se expande fuera:

Este párrafo contiene una palabra demasiado larga: estaesunamuymuymuymuyperomuylargapalabra. La palabra larga se romperá y se ajustará a la siguiente línea.

La propiedad word-wrap permite forzar que el texto se ajuste, incluso si esto significa dividirlo en medio de la palabra:

Este párrafo contiene una palabra demasiado larga: estaesunamuymuymuymuyperomuylargapalabra. La palabra larga se romperá y se ajustará a la siguiente línea.

p.rompre-palabra{
  width: 230px;
  word-wrap: break-word;
}

Rompiendo Palabras CSS

Este párrafo contiene algún texto. Esta linea-se-va-a-romper-en-guiones.

Este párrafo contiene algún texto. Las líneas se romperan en cualquier caracter.

p.prueba1 {
  word-break: keep-all;
}
p.prueba2 {
  word-break: break-all;
}

Modo de Escritura CSS

La propiedad writing-mode especifica si las líneas de texto están orientadas en horizontal o vertical.

Modo de escritura vertical-rl.

span.prueba1{
  writing-mode: horizontal-tb;
}
span.prueba2 {
  writing-mode: vertical-rl;
}
span-prueba3 {
  writing-mode: vertical-lr;
}

Propiedades para Efectos de Texto CSS

Propiedad	Descripción
text-align-last	Especifica como alinear la última línea de texto.
text-justify	Especifica como debe justificar y espaciar el texto.
text-overflow	Especifica como se debe mostrar el contenido desbordado que no se muestra.
word-break	Especifica reglas de saltos de línea para scripts que no son CJK.
word-wrap	Permite que las palabras largas se puedan romper y envolver en la siguiente línea
word-mode	Especifica si las líneas de texto están dispuestas horizontal o verticalmente.