
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 left
si la orientación del objeto es de izquierda a derecha y se comporta right
si la orientación del objeto es de derecha a izquierda.
end
La palabra reservada se comporta right
si la orientación del objeto es de izquierda a derecha y se comporta left
si 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.
- Propiedades float en CSS
- Propiedad clear en CSS
- Introducción al Lenguaje de Programación CSS
- Diferencias entre SASS y SCSS
- Características z-index en CSS
- Características width en CSS
- Características visibility en CSS
- Características top en CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características right en CSS
- Características position en CSS
- Características padding-top en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características padding en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow-wrap en CSS
- Características overflow en CSS
- Características order en CSS
- Características min-width en CSS
- Características min-height en CSS
- Características max-width en CSS
- Características max-height en CSS
- Características margin-top en CSS
- Características margin-right en CSS
- Características margin-left en CSS
- Características margin-bottom en CSS
- Características line-height en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características left en CSS
- Características justify-content en CSS
- Características height en CSS
- Características font-weight en CSS