Text-align-last - Trucos CSS | Almanaque CSS 2024

text-align-lastle permite controlar la alineación de la última (o única) línea de texto justo antes de un salto de línea forzado, por ejemplo, el final de un párrafo o la línea justo antes de una etiqueta.

.intro-graph ( text-align-last: center; )

En el momento de escribir este artículo, solo los navegadores Mozilla e Internet Explorer son compatibles text-align-last(con prefijos de proveedores), y cada uno tiene una implementación ligeramente diferente. Se suponía que la propiedad comenzaría a funcionar en Chrome 35, pero a partir de Chrome 40 todavía requiere la marca de plataformas web experimentales. Más detalles sobre las implementaciones del navegador en los Puntos de interés.

Valores

left alinea la última línea de texto a la izquierda del contenedor.
rightalinea la última línea de texto a la derecha del contenedor.
center centra la última línea de texto dentro del contenedor.
justify justifica la última línea de texto para que abarque todo el ancho del contenedor, insertando espacio entre las palabras si es necesario para aumentar la longitud de la línea.
startalinea el texto con el "inicio" de la línea según directionel tamaño del texto; a la izquierda para los idiomas LTR, a la derecha para los idiomas RTL.
endalinea la última línea con el "final" de la línea en función directiondel texto: a la derecha para los idiomas LTR, a la izquierda para los idiomas RTL.
autoel valor por defecto. Alinea la última línea de texto para que coincida con la text-alignpropiedad del elemento , si está establecida. Si no está configurado, autoalinea el texto con el inicio.
inheritaplica la text-align-lastpropiedad del elemento padre.

Manifestación

Esta demostración muestra los diferentes text-align-lastvalores en acción. Nota: Internet Explorer no admite los valores starto end.

Vea el Pen text-align-last de CSS-Tricks (@ css-tricks) en CodePen.

Puntos de interés

En Internet Explorer, text-align-lastsolo funciona cuando el text-alignresto del texto del elemento seleccionado está establecido en justify. Además, IE no reconoce el valor starto end.

En los navegadores Mozilla, text-align-lastfuncionará en la última línea antes de un salto de línea forzado, incluso si no se especifica una alineación para el resto del texto del elemento.

También vale la pena saber que text-align-lastestablece la alineación para todas las últimas líneas dentro del elemento seleccionado, no solo la última línea absoluta de texto. Entonces, por ejemplo, si tiene divcinco párrafos, su text-align-lastdeclaración se aplicará a la última línea de cada uno de los párrafos.

Si desea usar text-align-lastsolo en la última línea del contenedor, puede usar :last-childo :last-of-type. Su CSS se vería así:

#center-only-last p:last-child ( -ms-text-align-last: center; -moz-text-align-last: center; text-align-last: center; )

En la siguiente demostración, el lado izquierdo se muestra text-align-last: center;aplicado a un div con varios párrafos dentro. Observe que la última línea de cada párrafo está centrada. El lado derecho se muestra text-align-last: center;aplicado solo al último párrafo dentro del div usando :last-child.

Vea el Pen text-align-last de CSS-Tricks (@ css-tricks) en CodePen.

Relacionado

texto alineado
guion de texto

Más información

text-align-last en el módulo de texto CSS Nivel 3 (W3C)
text-align-last en MDN
text-align-last en MSDN
text-align-last en el blog del equipo de la plataforma web de Adobe
Webkit Bug 76173, con respecto a la implementación de Chrome de text-align-last