CSS | text-align-last Propiedad

Posted on by Rudeus Greyrat

La propiedad text-align-last en CSS se usa para establecer la última línea del párrafo justo antes del salto de línea. El salto de línea puede deberse al final natural de un párrafo o al uso de la etiqueta <br>. La propiedad text-align-last establece la alineación de todas las últimas líneas que aparecen en el elemento en el que se aplica la propiedad text-align-last. Por ejemplo, si la propiedad text-align-last se aplica al elemento <p>, todas las últimas líneas del elemento <p> se verán afectadas por la propiedad text-align-last.

Sintaxis:

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

Valor por defecto: Su valor por defecto es automático.

Valores de propiedad:

  • left: Hace que la última línea del párrafo quede alineada a la izquierda con respecto al contenedor.

    Sintaxis:

    text-align-last: left;

    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                text-align-last property
            </title>
      
            <!-- CSS style to text-align-last property -->
            <style>
                p {
                    text-align-last: left;
                    font-family: sans-serif;
                    border: 1px solid black;
                }
            </style>
        </head>
      
        <body>
          
            <h2 style = "text-align:center">
                text-align-last: left;
            </h2>
              
            <!-- text-align-last: left; property -->
            <p>
                Prepare for the Recruitment drive of product 
                based companies like Microsoft, Amazon, Adobe 
                etc with a free online placement preparation 
                course. The course focuses on various MCQ's 
                & Coding question likely to be asked in the 
                interviews & make your upcoming placement 
                season efficient and successful.
            </p>
          
            <!-- text-align-last: right; property -->
            <p> GeeksForGeeks: A computer science portal</p>
          
        </body>
    </html>                    

    Producción:

  • right: Hace que la última línea del párrafo quede alineada a la derecha con respecto al contenedor.

    Sintaxis:

    text-align-last: right;

    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                text-align-last property
            </title>
      
            <!-- CSS style to text-align-last property -->
            <style>
                p {
                    text-align-last: right;
                    font-family: sans-serif;
                    border: 1px solid black;
                }
            </style>
        </head>
      
        <body>
          
            <h2 style = "text-align:center">
                text-align-last: right;
            </h2>
              
            <!-- text-align-last: left; property -->
            <p>
                Prepare for the Recruitment drive of product 
                based companies like Microsoft, Amazon, Adobe 
                etc with a free online placement preparation 
                course. The course focuses on various MCQ's 
                & Coding question likely to be asked in the 
                interviews & make your upcoming placement 
                season efficient and successful.
            </p>
          
            <!-- text-align-last: right; property -->
            <p> GeeksForGeeks: A computer science portal</p>
          
        </body>
    </html>                    

    Producción:

  • center: Hace que la última línea quede alineada al centro con respecto al contenedor.

    Sintaxis:

    text-align-last: center;

    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                text-align-last property
            </title>
      
            <!-- CSS style to text-align-last property -->
            <style>
                p {
                    text-align-last: center;
                    font-family: sans-serif;
                    border: 1px solid black;
                }
            </style>
        </head>
      
        <body>
          
            <h2 style = "text-align:center">
                text-align-last: center;
            </h2>
              
            <!-- text-align-last: left; property -->
            <p>
                Prepare for the Recruitment drive of product 
                based companies like Microsoft, Amazon, Adobe 
                etc with a free online placement preparation 
                course. The course focuses on various MCQ's 
                & Coding question likely to be asked in the 
                interviews & make your upcoming placement 
                season efficient and successful.
            </p>
          
            <!-- text-align-last: right; property -->
            <p> GeeksForGeeks: A computer science portal</p>
          
        </body>
    </html>                    

    Producción:

  • justificar: Hace que la última línea esté justificada, es decir, la última línea ocupará todo el ancho del contenedor, se inserta un espacio extra entre las palabras para lograr esta propiedad.

    Sintaxis:

    text-align-last: justify;

    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                text-align-last property
            </title>
      
            <!-- CSS style to text-align-last property -->
            <style>
                p {
                    text-align-last: justify;
                    font-family: sans-serif;
                    border: 1px solid black;
                }
            </style>
        </head>
      
        <body>
          
            <h2 style = "text-align:center">
                text-align-last: justify;
            </h2>
              
            <!-- text-align-last: left; property -->
            <p>
                Prepare for the Recruitment drive of product 
                based companies like Microsoft, Amazon, Adobe 
                etc with a free online placement preparation 
                course. The course focuses on various MCQ's 
                & Coding question likely to be asked in the 
                interviews & make your upcoming placement 
                season efficient and successful.
            </p>
          
            <!-- text-align-last: right; property -->
            <p> GeeksForGeeks: A computer science portal</p>
          
        </body>
    </html>                    

    Producción:

  • start: Hace que la última línea esté alineada a la izquierda, si la dirección del texto es de izquierda a derecha (LTR) y hace que la última línea esté alineada a la derecha, si la dirección del texto es de derecha a izquierda (RTL).

    Sintaxis:

    text-align-last: start;

    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                text-align-last property
            </title>
      
            <!-- CSS style to text-align-last property -->
            <style>
                p {
                    text-align-last: start;
                    font-family: sans-serif;
                    border: 1px solid black;
                }
            </style>
        </head>
      
        <body>
          
            <h2 style = "text-align:center">
                text-align-last: start;
            </h2>
              
            <!-- text-align-last: left; property -->
            <p>
                Prepare for the Recruitment drive of product 
                based companies like Microsoft, Amazon, Adobe 
                etc with a free online placement preparation 
                course. The course focuses on various MCQ's 
                & Coding question likely to be asked in the 
                interviews & make your upcoming placement 
                season efficient and successful.
            </p>
          
            <!-- text-align-last: right; property -->
            <p> GeeksForGeeks: A computer science portal</p>
          
        </body>
    </html>                    

    Producción:

  • end: Alinea la última línea a la derecha, si la dirección del texto es de izquierda a derecha (LTR) y alinea la última línea a la izquierda, si la dirección del texto es de derecha a izquierda (RTL).

    Sintaxis:

    text-align-last: end;

    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                text-align-last property
            </title>
      
            <!-- CSS style to text-align-last property -->
            <style>
                p {
                    text-align-last: end;
                    font-family: sans-serif;
                    border: 1px solid black;
                }
            </style>
        </head>
      
        <body>
          
            <h2 style = "text-align:center">
                text-align-last: end;
            </h2>
              
            <!-- text-align-last: left; property -->
            <p>
                Prepare for the Recruitment drive of product 
                based companies like Microsoft, Amazon, Adobe 
                etc with a free online placement preparation 
                course. The course focuses on various MCQ's 
                & Coding question likely to be asked in the 
                interviews & make your upcoming placement 
                season efficient and successful.
            </p>
          
            <!-- text-align-last: right; property -->
            <p> GeeksForGeeks: A computer science portal</p>
          
        </body>
    </html>                    

    Producción:

  • auto: hace que la última línea del párrafo se alinee según la propiedad de alineación de texto del contenedor cuando la propiedad de alineación de texto no está configurada para justificar.

    Sintaxis:

    text-align-last: auto;

    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                text-align-last property
            </title>
      
            <!-- CSS style to text-align-last property -->
            <style>
                p {
                    text-align-last: auto;
                    font-family: sans-serif;
                    border: 1px solid black;
                }
            </style>
        </head>
      
        <body>
          
            <h2 style = "text-align:center">
                text-align-last: auto;
            </h2>
              
            <!-- text-align-last: left; property -->
            <p>
                Prepare for the Recruitment drive of product 
                based companies like Microsoft, Amazon, Adobe 
                etc with a free online placement preparation 
                course. The course focuses on various MCQ's 
                & Coding question likely to be asked in the 
                interviews & make your upcoming placement 
                season efficient and successful.
            </p>
          
            <!-- text-align-last: right; property -->
            <p> GeeksForGeeks: A computer science portal</p>
          
        </body>
    </html>                    

    Producción:

  • initial: Hace que la última línea del párrafo se alinee según su valor por defecto (alineado a la izquierda).

    Sintaxis:

    text-align-last: initial;

    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                text-align-last property
            </title>
      
            <!-- CSS style to text-align-last property -->
            <style>
                p {
                    text-align-last: initial;
                    font-family: sans-serif;
                    border: 1px solid black;
                }
            </style>
        </head>
      
        <body>
          
            <h2 style = "text-align:center">
                text-align-last: initial;
            </h2>
              
            <!-- text-align-last: left; property -->
            <p>
                Prepare for the Recruitment drive of product 
                based companies like Microsoft, Amazon, Adobe 
                etc with a free online placement preparation 
                course. The course focuses on various MCQ's 
                & Coding question likely to be asked in the 
                interviews & make your upcoming placement 
                season efficient and successful.
            </p>
          
            <!-- text-align-last: right; property -->
            <p> GeeksForGeeks: A computer science portal</p>
          
        </body>
    </html>                    

    Producción:

  • heredar: hace que la última línea del párrafo se alinee, según la propiedad text-align-last de su elemento padre.

Navegadores compatibles: los navegadores compatibles con la propiedad text-align-last se enumeran a continuación:

  • Google Chrome 47.0
  • Internet Explorer 5.5
  • Firefox 49.0, 12.0 -moz-
  • Ópera 34.0

Publicación traducida automáticamente

Artículo escrito por Husban y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *