9.1 Propiedad text-indent
Las propiedades de los párrafos en CSS juegan un papel clave en la gestión del formato del texto, asegurando comodidad de lectura y atractivo estético. Entre ellas, text-indent y text-align-last son herramientas importantes para ajustar las sangrías y la alineación de la última línea de texto en un párrafo.
La propiedad text-indent gestiona la sangría de la primera línea de texto dentro de un elemento de bloque. Se utiliza a menudo para crear sangrías al inicio de los párrafos, lo que mejora la legibilidad y estructura del texto.
Valores:
- Valores absolutos: valores en unidades fijas, como píxeles (
px), puntos (pt), centímetros (cm) etc. Por ejemplo,text-indent: 20px; - Valores porcentuales: valores en porcentaje respecto al ancho del bloque contenedor. Por ejemplo,
text-indent: 5%; - Valores negativos: las sangrías pueden ser negativas, lo que llevará el texto a alinearse a la izquierda fuera de los límites del contenedor. Por ejemplo,
text-indent: -20px;
Ejemplo de uso:
.indent-20px {
text-indent: 20px;
}
.indent-5percent {
text-indent: 5%;
}
.indent-negative {
text-indent: -20px;
}
<body>
<p class="indent-20px">Este es un párrafo con sangría de la primera línea en 20 píxeles.</p>
<p class="indent-5percent">Este es un párrafo con sangría de la primera línea en 5 por ciento del ancho del bloque.</p>
<p class="indent-negative">Este es un párrafo con sangría negativa de la primera línea en 20 píxeles.</p>
</body>
9.2 Propiedad text-align-last
La propiedad text-align-last gestiona la alineación de la última línea de texto dentro de un elemento de bloque. Es útil para lograr una alineación consistente en los párrafos, especialmente cuando el texto está justificado (justify).
Valores:
auto: la última línea se alinea como texto normal (valor por defecto)left: la última línea se alinea al borde izquierdoright: la última línea se alinea al borde derechocenter: la última línea se centrajustify: la última línea se alinea al ancho, como el resto de las líneas del párrafo
Ejemplo de uso:
.justify-left {
text-align: justify;
text-align-last: left;
}
.justify-right {
text-align: justify;
text-align-last: right;
}
.justify-center {
text-align: justify;
text-align-last: center;
}
.justify-justify {
text-align: justify;
text-align-last: justify;
}
<body>
<p class="justify-left">Este es un párrafo con texto justificado y la última línea alineada al borde izquierdo.</p>
<p class="justify-right">Este es un párrafo con texto justificado y la última línea alineada al borde derecho.</p>
<p class="justify-center">Este es un párrafo con texto justificado y la última línea centrada.</p>
<p class="justify-justify">Este es un párrafo con texto y última línea justificados.</p>
</body>
9.3 Uso combinado de propiedades
Las propiedades text-indent y text-align-last pueden utilizarse juntas para crear un formato de párrafos más complejo, mejorando la legibilidad y la estructura visual del texto.
Ejemplo HTML y CSS:
.styled-paragraph {
text-indent: 30px;
text-align: justify;
text-align-last: right;
width: 300px;
border: 1px solid #000;
padding: 10px;
}
<body>
<p class="styled-paragraph">
Este párrafo tiene una sangría de la primera línea de 30 píxeles, el texto está justificado y la última línea alineada al borde derecho.
Esto demuestra el uso combinado de las propiedades text-indent y text-align-last para lograr el efecto deseado en el formato.
</p>
</body>
Explicación del código:
text-indent: 30px;: establece la sangría de la primera línea de texto en 30 píxelestext-align: justify;: alinea el texto al ancho del contenedortext-align-last: right;: alinea la última línea de texto al borde derechowidth: 300px;: establece el ancho del contenedor de textoborder: 1px solid #000;: añade un borde alrededor del contenedor de textopadding: 10px;: establece los márgenes internos dentro del contenedor
GO TO FULL VERSION