CSS Text Effects

Desbordamiento de texto CSS, ajuste de línea, reglas de salto de línea y modos de escritura

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

• text-overflow

• word-wrap

• word-break

• writing-mode

Desbordamiento del texto

La propiedad text-overflow CSS especifica cómo se debe señalar al usuario el contenido desbordado que no se muestra.

Ejemplo:

p.test1 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}

Ver ejemplo

El siguiente ejemplo muestra cómo puedes mostrar el contenido desbordado al pasar el cursor sobre el elemento:

Ejemplo:

div.test:hover {
  overflow: visible;
}

Ver ejemplo

Ajuste de palabras

La propiedad word-wrap CSS permite que las palabras largas se puedan dividir y pasar a la siguiente línea.

Si una palabra es demasiado larga para caber dentro de un área, se expande hacia afuera:

La propiedad word-wrap le permite forzar el ajuste del texto, incluso si eso significa dividirlo en medio de una palabra:

El código CSS es el siguiente:

Ejemplo:

Permita que las palabras largas se puedan dividir y pasar a la siguiente línea:

p {
  word-wrap: break-word;
}

Ver ejemplo

Separación de palabras

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

El código CSS es el siguiente:

Ejemplo:

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

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

Ver ejemplo

Modo de escritura

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

El siguiente ejemplo muestra algunos modos de escritura diferentes:

Ejemplo:

p.test1 {
  writing-mode: horizontal-tb;
}

span.test2 {
  writing-mode: vertical-rl;
}

p.test2 {
  writing-mode: vertical-rl;
}

Ver ejemplo

Todas las propiedades

Traducido con 💚 desde W3Schools.com