53 - Efectos de texto en CSS: Controla la apariencia de tu texto ✍️

---

53 - Efectos de Texto en CSS ✨

Los efectos de texto en CSS te permiten controlar cómo se muestra el texto, especialmente en situaciones de desbordamiento, y darle una dirección diferente.

Temas de la lección

• 1. Desbordamiento de texto (text-overflow)
• 2. Word Wrapping (overflow-wrap)
• 3. Word Breaking (word-break)
• 4. Modo de escritura (writing-mode)

---

1. Desbordamiento de texto (text-overflow)

La propiedad text-overflow especifica cómo se indica al usuario que el texto de un elemento ha sido cortado. Funciona en conjunto con white-space: nowrap; y overflow: hidden;. El valor más común es ellipsis, que muestra puntos suspensivos.

.caja {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 250px;
}

Este es un texto largo que será cortado para encajar en el contenedor.

---

2. Word Wrapping (overflow-wrap)

La propiedad overflow-wrap controla si el navegador debe romper una palabra larga que desborda el contenedor para que no se salga. La sintaxis anterior, word-wrap, sigue funcionando en la mayoría de los navegadores.

.caja {
  width: 150px;
  overflow-wrap: break-word;
}

Este texto tiene una palabra muylargaquesaledelacajaperoconoverflow-wrap.

---

3. Word Breaking (word-break)

La propiedad word-break especifica cómo se deben romper las líneas cuando el texto alcanza el borde de su contenedor. break-all permite romper palabras en cualquier carácter para ajustarse al ancho.

.caja {
  width: 100px;
  word-break: break-all;
}

EstaEsUnaPalabraMuyLargaSinEspaciosQueSeRompera.

---

4. Modo de escritura (writing-mode)

La propiedad writing-mode define si las líneas de texto se disponen horizontal o verticalmente. Esto es útil para idiomas que se escriben de forma vertical o para efectos de diseño creativos.

.caja {
  writing-mode: vertical-rl;
  height: 200px;
}

Este texto está escrito de forma vertical.

---

Propiedades de Efecto de Texto

Propiedad	Descripción
text-overflow	Controla cómo se indica el texto desbordado (p. ej., con puntos suspensivos).
overflow-wrap	Rompe palabras largas para evitar que desborden su contenedor.
word-break	Controla dónde se rompen las líneas dentro de una palabra.
writing-mode	Define si el texto se dispone horizontal o verticalmente.
text-align	Alinea el texto dentro de su contenedor (izquierda, derecha, centro, justificado).
text-transform	Convierte el texto a mayúsculas, minúsculas o lo capitaliza.
text-decoration	Añade o quita líneas del texto (subrayado, tachado, etc.).
text-shadow	Añade una sombra al texto, dándole profundidad.
letter-spacing	Aumenta o disminuye el espacio entre los caracteres.
word-spacing	Aumenta o disminuye el espacio entre las palabras.
line-height	Establece el espacio entre las líneas de texto.
white-space	Controla cómo se manejan los espacios y los saltos de línea.
text-indent	Especifica la sangría de la primera línea de un párrafo.

---

Ir al índice