CSS | propiedad de justificación de texto

Posted on by Rudeus Greyrat

La propiedad de justificación de texto en CSS se usa para establecer la alineación de texto para justificar. Distribuye las palabras en la línea completa.

Sintaxis:

text-justify: auto|inter-word|inter-character|none:initial|inherit;

Valores de propiedad: los valores de propiedad justificados por texto se enumeran a continuación:

  • auto: se utiliza para permitir que el navegador determine qué propiedad de justificación sería mejor para el texto dado.

    Sintaxis:

    text-justify: auto;

    Ejemplo:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>text-justify property</title> 
            <style> 
                #main { 
                    border:1px solid green;
                    padding-bottom: 6px;
                } 
                #geeks { 
                    text-align:justify;
                    text-justify:auto;
                } 
                h1, h2, h3 {
                    text-align:center;
                }
            </style> 
        </head> 
        <body> 
            <h1 style = "color:green">
                GeeksforGeeks
            </h1> 
              
            <div id = "main"> 
              
                <h3>text-justify: auto;</h3> 
                  
                <!-- text-justify property used here -->
                <div id = "geeks">
                 HTML stands for Hyper Text Markup Language. 
                 It is used to design web pages using a markup
                 language. HTML is the combination of Hypertext
                 and Markup language.
            </div> 
            </div>
        </body> 
    </html>                    

    Producción:

  • entre palabras: El texto se justifica aumentando o disminuyendo el espacio entre palabras individuales en un texto.

    Sintaxis:

    text-justify: inter-word;

    Ejemplo:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>text-justify property</title> 
            <style> 
                #main { 
                    border:1px solid green;
                    padding-bottom: 6px;
                } 
                #geeks { 
                    text-align:justify;
                    text-justify:inter-word;
                } 
                h1, h2, h3 {
                    text-align:center;
                }
            </style> 
        </head> 
        <body> 
            <h1 style = "color:green">
                GeeksforGeeks
            </h1> 
              
            <div id = "main"> 
              
                <h3>text-justify: inter-word;</h3> 
                  
                <!-- text-justify property used here -->
                <div id = "geeks">
                 HTML stands for Hyper Text Markup Language. 
                 It is used to design web pages using a markup
                 language. HTML is the combination of Hypertext
                 and Markup language.
            </div> 
            </div>
        </body> 
    </html>                    

    Producción:

  • entre caracteres: el texto se justifica aumentando o disminuyendo el espacio entre caracteres individuales en un texto.

    Sintaxis:

    text-justify: inter-character;

    Ejemplo:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>text-justify property</title> 
            <style> 
                #main { 
                    border:1px solid green;
                    padding-bottom: 6px;
                } 
                #geeks { 
                    text-align:justify;
                    text-justify:inter-character;
                } 
                h1, h2, h3 {
                    text-align:center;
                }
            </style> 
        </head> 
        <body> 
            <h1 style = "color:green">
                GeeksforGeeks
            </h1> 
              
            <div id = "main"> 
              
                <h3>text-justify: inter-character;</h3> 
                  
                <!-- text-justify property used here -->
                <div id = "geeks">
                 HTML stands for Hyper Text Markup Language. 
                 It is used to design web pages using a markup
                 language. HTML is the combination of Hypertext
                 and Markup language.
            </div> 
            </div>
        </body> 
    </html>                    

    Producción:

  • none: Se utiliza para deshabilitar los métodos de justificación utilizados en el texto.

    Sintaxis:

    text-justify: auto;

    Ejemplo:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>text-justify property</title> 
            <style> 
                #main { 
                    border:1px solid green;
                    padding-bottom: 6px;
                } 
                #geeks { 
                    text-align:justify;
                    text-justify:auto;
                } 
                h1, h2, h3 {
                    text-align:center;
                }
            </style> 
        </head> 
        <body> 
            <h1 style = "color:green">
                GeeksforGeeks
            </h1> 
              
            <div id = "main"> 
              
                <h3>text-justify: auto;</h3> 
                  
                <!-- text-justify property used here -->
                <div id = "geeks">
                 HTML stands for Hyper Text Markup Language. 
                 It is used to design web pages using a markup
                 language. HTML is the combination of Hypertext
                 and Markup language.
            </div> 
            </div>
        </body> 
    </html>                    

    Producción:

Navegadores compatibles: los navegadores compatibles con la propiedad de justificación de texto se enumeran a continuación:

  • Google Chrome
  • Internet Explorer 11.0
  • Firefox 55.0
  • Ópera
  • Safari 10.0.3

Publicación traducida automáticamente

Artículo escrito por suptotthitamajumdar 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 *