当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


CSS text-justify用法及代码示例


CSS中的text-justify属性用于将text-align设置为对齐。它将单词分散到整个行中。

用法:

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

属性值:下面列出了text-justify属性值:


  • auto:它用于允许浏览器确定哪种对齐方式属性对于给定的文本更好。

    用法:

    text-justify:auto;

    例:

    <!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>                    

    输出:

  • inter-word:通过增加或减少文本中各个单词之间的间距来证明文本是合理的。

    用法:

    text-justify:inter-word;

    例:

    <!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>                    

    输出:

  • inter-character:通过增加或减小文本中各个字符之间的间距来证明文本是合理的。

    用法:

    text-justify:inter-character;

    例:

    <!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>                    

    输出:

  • none:它用于禁用文本中使用的对正方法。

    用法:

    text-justify:auto;

    例:

    <!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>                    

    输出:

支持的浏览器:下面列出了text-justify属性支持的浏览器:

  • 谷歌浏览器
  • Internet Explorer 11.0
  • Firefox 55.0
  • Opera
  • Safari 10.0.3


相关用法


注:本文由纯净天空筛选整理自suptotthitamajumdar大神的英文原创作品 CSS | text-justify Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。