Efectos de texto de CSS

CSS Text Overflow, Break Word, Reglas de Salto de Línea y Modo de Escritura

En este capítulo, aprenderás las siguientes propiedades:

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

CSS Text Overflow

CSS text-overflow La propiedad especifica cómo se debe presentar al usuario el contenido sobrante no visible.

Se puede cortar:

Esto es un texto largo que no puede caber en el cuadro. Esto es un texto largo que no puede caber en el cuadro.

También se puede presentar como puntos suspensivos (…):

Esto es un texto largo que no puede caber en el cuadro. Esto es un texto largo que no puede caber en el cuadro.

El código CSS es el siguiente:

Ejemplo

p.test1 {
  white-space: nowrap; 
  ancho: 200px; 
  border: 1px sólido #000000;
  overflow: hidden;
  text-overflow: clip; 
}
p.test2 {
  white-space: nowrap; 
  ancho: 200px; 
  border: 1px sólido #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

Prueba por ti mismo

El siguiente ejemplo muestra cómo se muestra el contenido sobrante cuando se coloca el ratón sobre el elemento:

Ejemplo

div.test:hover {
  overflow: visible;
}

Prueba por ti mismo

Salto de línea de palabra CSS (Word Wrapping)

CSS word-wrap La propiedad permite que los textos largos se rompan y se muevan a la siguiente línea.

Si una palabra es demasiado larga para caber en un área, se expandirá hacia afuera:

Este párrafo contiene una palabra muy larga: thisisaveryveryveryveryveryverylongword. La palabra larga se romperá y se moverá a la siguiente línea.

A través de la propiedad word-wrap, puedes forzar la salto de línea del texto - incluso si esto significa romper la palabra en el medio:

Este párrafo contiene una palabra muy larga: thisisaveryveryveryveryveryverylongword. La palabra larga se romperá y se moverá a la siguiente línea.

El código CSS es el siguiente:

Ejemplo

Permite que las palabras largas se rompan y se muevan a la siguiente línea:

p {
  word-wrap: break-word;
}

Prueba por ti mismo

Reglas de salto de línea CSS

CSS word-break La propiedad especifica las reglas de salto de línea.

Este párrafo contiene algunos textos. Esta línea se romperá en los guiones.

Este párrafo contiene algunos textos. Esta línea se romperá en los guiones.

Este párrafo contiene algunos textos. Estas líneas se romperán en cualquier carácter.

Este párrafo contiene algunos textos. Las líneas se romperán en cualquier carácter.

El código CSS es el siguiente:

Ejemplo

p.test1 {
  word-break: keep-all;
}
p.test2 {
  word-break: break-all;
}

Prueba por ti mismo

Modo de escritura CSS

CSS writing-mode La propiedad especifica si las líneas de texto se colocan horizontalmente o verticalmente.

Algun texto con un elemento span con una vertical-rl writing-mode.

El siguiente ejemplo muestra diferentes modos de escritura:

Ejemplo

p.test1 {
  writing-mode: horizontal-tb; 
}
span.test2 {
  writing-mode: vertical-rl; 
}
p.test2 {
  writing-mode: vertical-rl; 
}

Prueba por ti mismo

Propiedades de efecto de texto CSS

La siguiente tabla enumera las propiedades de efecto de texto CSS:

Atributo Descripción
text-align-last Especifica cómo alinear la última línea de texto.
text-justify Especifica cómo alinear y espaciar el texto alineado.
text-overflow Especifica cómo se debe presentar al usuario el contenido que no se muestra.
word-break Especifica las reglas de salto de línea para scripts no CJK.
word-wrap Permite que las palabras largas se rompan y se muevan a la siguiente línea.
writing-mode Especifica si la línea de texto debe colocarse horizontalmente o verticalmente.