Características text-align-last en CSS

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 inicialauto
aplicado abloques de contenedores.
heredable
móvilNo
Valor calculadoComo 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-alignstart 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ísticaChromeFirefoxIEOperaSafari
Soporte básico47.049.0No soportadosoportadoNo 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.

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.