Alineación, decoración y espaciado del texto
Alinee el texto, añada subrayados o tachados y controle el espaciado entre letras y líneas.
Alineación, decoración y espaciado del texto es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
text-align
text-align controla la alineación horizontal del contenido en línea dentro de un contenedor de bloque.
<p class="left">Left aligned text</p>
<p class="center">Center aligned text</p>
<p class="right">Right aligned text</p>
<p class="justify">Justified text that stretches to fill the full width of its container on every line except the last, spreading word spacing evenly across the line.</p>
text-align: justify
justify estira las líneas para ocupar todo el ancho del contenedor, añadiendo espacio entre las palabras. Úselo junto con hyphens: auto para evitar espacios poco naturales en contenedores estrechos.
<p>Justified paragraph text with hyphenation enabled so that long words like internationalization can break across justified lines cleanly without leaving large gaps.</p>
text-decoration
text-decoration añade líneas al texto. Se usa habitualmente para subrayar enlaces o tachar contenido eliminado.
<a href="#">Underlined link</a>
<p class="strikethrough">Strikethrough text</p>
<a href="#" class="no-underline">No underline link</a>
Forma larga de text-decoration
text-decoration es una abreviatura para la línea, el estilo, el color y el grosor:
<a href="#">Wavy red underline link</a>
text-transform
text-transform cambia las mayúsculas y minúsculas del texto sin modificar el HTML subyacente:
<p class="upper">uppercase this text</p>
<p class="lower">LOWERCASE THIS TEXT</p>
<p class="title">title case this text</p>
<p class="none">No Transform Applied</p>
text-indent
text-indent aplica sangría a la primera línea de un elemento de bloque. Use un valor negativo junto con un padding equivalente para ocultar texto de forma accesible (reemplazo de imágenes).
<p class="indent">This paragraph's first line is indented by 2em, a classic print-style paragraph convention brought to the web.</p>
<a href="#" class="logo-link">Company Logo</a>
white-space
white-space controla cómo se gestionan los espacios en blanco y los saltos de línea del HTML de origen:
normal— combina los espacios en blanco y ajusta las líneas en los límites de las palabrasnowrap— impide el ajuste de líneapre— conserva los espacios en blanco y no ajusta las líneaspre-wrap— conserva los espacios en blanco y permite ajustar las líneas
<p class="nowrap">This text will not wrap no matter how long the line becomes.</p>
<pre>function example() {
return true;
}</pre>
letter-spacing
letter-spacing establece espacio adicional entre los caracteres. Los valores positivos separan los glifos; los negativos los acercan. Use em para un escalado proporcional.
<p class="spaced">spaced heading text</p>
word-spacing
word-spacing añade espacio adicional entre las palabras. Rara vez es necesario, pero resulta útil para ajustar texto justificado o titulares de presentación.
<h1>Word Spaced Heading Example</h1>
text-overflow: ellipsis
Trunque el texto que desborda mediante puntos suspensivos. Requiere overflow: hidden y white-space: nowrap.
<p class="truncate">This is a very long line of text that will be truncated with an ellipsis</p>
Texto vertical con writing-mode
writing-mode gira la dirección del flujo del texto. Combinado con text-orientation, permite crear tipografía CJK vertical o etiquetas giradas con fines creativos.
<div class="label">Vertical Label Text</div>
Comprobación rápida
¿Qué tres propiedades se necesitan para mostrar puntos suspensivos cuando el texto desborda?
Resumen
text-align posiciona el contenido en línea dentro de su contenedor. text-decoration añade o elimina líneas. text-transform cambia las mayúsculas y minúsculas. La combinación white-space: nowrap + overflow: hidden + text-overflow: ellipsis es la receta clásica para truncar texto.
Aprende CSS con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «Alineación, decoración y espaciado del texto» es gratis?
Sí — el texto completo de «Alineación, decoración y espaciado del texto» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Alineación, decoración y espaciado del texto»?
Alinee el texto, añada subrayados o tachados y controle el espaciado entre letras y líneas. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Alineación, decoración y espaciado del texto»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Familias tipográficas y fuentes seguras para la web
- Tamaño, peso y estilo de fuente
- Alineación, decoración y espaciado del texto
- Google Fonts y @font-face