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


CSS writing-mode用法及代码示例


writing-mode CSS属性用于表示文本行是水平放置还是垂直放置,以及块前进的方向。

用法:

writing-mode:horizontal-tb|vertical-rl|vertical-lr;

属性值



  • horizontal-tb:此模式使内容从左到右水平流动,从上到下垂直流动。下一条水平线位于上一条线的下方。

    用法:

    writing-mode:horizontal-tb;
    

    例:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>writing-mode Property</title> 
            <style>  
                p.geek { 
                    width:300px; 
                    height:100px; 
                    border:1px solid black; 
                    writing-mode:horizontal-tb; 
                    color:white; 
                    background:green; 
                } 
            </style> 
        </head> 
        <body style = "text-align:center;"> 
            <h1 style = "color:green;">GeeksforGeeks</h1> 
            <p class="geek"> 
             Geeks Classes is a classroom program in Noida.  
             This is a quick course to cover algorithms  
             questions. 
            </p> 
        </body> 
    </html>

    输出:
    horizontal-tb

  • vertical-rl:此模式使内容从上到下垂直流动,从右到左水平流动。下一条垂直线位于前一行的左侧。

    用法:

    writing-mode:vertical-rl;
    

    例:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>writing-mode Property</title> 
            <style>  
                p.geek { 
                    width:200px; 
                    height:200px; 
                    border:1px solid black; 
                    writing-mode:vertical-rl; 
                    color:white; 
                    background:green; 
                } 
            </style> 
        </head> 
        <body style = "text-align:center;"> 
            <h1 style = "color:green;">GeeksforGeeks</h1> 
            <p class="geek"> 
             Geeks Classes is a classroom program in Noida.  
             This is a quick course to cover algorithms  
             questions. 
            </p> 
        </body> 
    </html>

    输出:
    vertical-rl

  • vertical-lr:此模式使内容从上到下垂直流动,从左到右水平流动。下一条垂直线位于前一行的右侧。

    用法:

    writing-mode:vertical-lr;
    

    例:

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>writing-mode Property</title> 
            <style>  
                p.geek { 
                    width:200px; 
                    height:200px; 
                    border:1px solid black; 
                    writing-mode:vertical-lr; 
                    color:white; 
                    background:green; 
                } 
            </style> 
        </head> 
        <body style = "text-align:center;"> 
            <h1 style = "color:green;">GeeksforGeeks</h1> 
            <p class="geek"> 
             Geeks Classes is a classroom program in Noida.  
             This is a quick course to cover algorithms  
             questions. 
            </p> 
        </body> 
    </html>

    输出:
    vertical-lr

支持的浏览器:下面列出了支持writing-mode属性的浏览器:

  • 谷歌浏览器48.0
  • Internet Explorer 12.0
  • Firefox 41.0
  • Opera 35.0
  • 苹果Safari 11.0



相关用法


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