Características text-align-last en CSS

La propiedad text-align-last en CSS describe cómo se alinea la última línea de texto.

Funciones text-align-last css

Valor inicial	auto
aplicado a	bloques de contenedores.
heredable	Sí
móvil	No
Valor calculado	Como se especificó.

/* Palabras reservadas */
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;
/* Valores globales */
text-align-last: inherit;
text-align-last: initial;
text-align-last: unset;

Ejemplos y aplicaciones en código

Un ejemplo del uso de todas las palabras reservadas admitidas en una propiedad text-align-last, repetiremos cada ejemplo dos veces, una en un párrafo en inglés (dirección de texto de izquierda a derecha) y una vez en un párrafo árabe (dirección de texto de derecha a izquierda) , nota que establezca la propiedad text-align a start alinear todo el texto, excepto la última línea:

< p  class = "start"  dir = "ltr" > Probando < code > text-align-last: start </ code > . Observe cómo se alinea la última línea y tenga en cuenta que el resto del elemento puede estar en una alineación diferente .. </ p > 
< p  class = "start"  dir = "rtl" > < code > text-align- último: inicio </ code >Observe cómo la alineación de la última línea difiere del resto del contenido y observe cómo el resto del texto en el elemento puede usar una alineación diferente. </ p > 
< hr >

< p  class = "end"  dir = "ltr" > Probando < code > text-align-last: end </ code > . Observe cómo se alinea la última línea y tenga en cuenta que el resto del elemento puede estar en una alineación diferente .. </ p > 
< p  class = "end"  dir = "rtl" >  < code > text-align: end </ code > .</ p > 
< hr >

< p  class = "left"  dir = "ltr" > Probando < code > text-align-last: left </ code > . Observe cómo se alinea la última línea y tenga en cuenta que el resto del elemento puede estar en una alineación diferente .. </ p > 
< p  class = "left"  dir = "rtl" > < code > text-align- último: izquierda </ code >Observe cómo la alineación de la última línea difiere del resto del contenido y observe cómo el resto del texto en el elemento puede usar una alineación diferente. </ p > 
< hr >

< p  class = "right"  dir = "ltr" > Probando < code > text-align-last: right </ code > . Observe cómo se alinea la última línea y tenga en cuenta que el resto del elemento puede estar en una alineación diferente .. </ p > 
< p  class = "right"  dir = "rtl" >< code > text-align- último: derecha </ code >Observe cómo la alineación de la última línea difiere del resto del contenido y observe cómo el resto del texto en el elemento puede usar una alineación diferente. </ p > 
< hr >

< p  class = "center"  dir = "ltr" > Probando < code > text-align-last: center </ code > . Observe cómo se alinea la última línea y tenga en cuenta que el resto del elemento puede estar en una alineación diferente. </ p > 
< p  class = "center"  dir = "rtl" > < code > text-align-last: center </ code >Observe cómo la alineación de la última línea difiere del resto del contenido y observe cómo el resto del texto en el elemento puede usar una alineación diferente. </ p > 
< hr >

< p  class = "justify"  dir = "ltr" > Prueba de < code > text-align-last: justify </ code > . Observe cómo se alinea la última línea y tenga en cuenta que el resto del elemento puede estar en una alineación diferente .. </ p > 
< p  class = "justify"  dir = "rtl" > تجربة < code > text-align- último: justificar </ code >Observe cómo la alineación de la última línea difiere del resto del contenido y observe cómo el resto del texto en el elemento puede usar una alineación diferente. </ p >

Código CSS:

p {
  background-color: #f8f9fa;
  border: 1px solid #eaecf0;
  padding: 1em;
  margin: 1em;
  text-align: start;
}
.end     { text-align-last: end; }
.left    { text-align-last: left; }
.right   { text-align-last: right; }
.start   { text-align-last: start; }
.center  { text-align-last: center; }
.justify { text-align-last: justify; }

Soporte de navegadores

Característica	Chrome	Firefox	IE	Opera	Safari
Soporte básico	47.0	49.0	No soportado	soportado	No soportado

Características generales

La propiedad acepta text-align-last una de las siguientes palabras reservadas.

auto

La última línea se alineará de acuerdo con text-align, a menos que la propiedad text-align sea igual a justify, en cuyo caso esa propiedad será igual a start.

start

La palabra reservada se comporta leftsi la orientación del objeto es de izquierda a derecha y se comporta rightsi la orientación del objeto es de derecha a izquierda.

end

La palabra reservada se comporta rightsi la orientación del objeto es de izquierda a derecha y se comporta leftsi la orientación del objeto es de derecha a izquierda.

left

La última línea se alineará con el borde izquierdo del cuadro de línea.

right

La última línea se alineará con el borde derecho del cuadro de línea.

center

La última línea se alineará con la mitad del cuadro de línea.

justify

El navegador intentará llenar toda la línea con texto desde el borde izquierdo hasta el borde derecho del cuadro de línea.

Estructura text-align-last css

text-align-last: auto | start | end | left | right | center | justify;

Consulte también

Una página de propiedades text-align que describe cómo los elementos en línea, como el texto, se alinean en contenedores de bloques.
La página de propiedades right que ayuda a determinar la posición horizontal correcta de un elemento que se puede reposicionar.
La página de propiedades left que define la posición horizontal izquierda de un elemento que se puede reposicionar.