• 技术文章 >web前端 >css教程

    css怎么让div文字竖着

    藏色散人藏色散人2021-02-23 14:59:30原创78

    css让div文字竖着的实现方法:首先创建一个HTML示例文件;然后创建一个div;最后通过设置css样式为“div{writing-mode: tb-rl;} ”即可让div文字竖着。

    本文操作环境:Windows7系统、HTML5&&CSS3、Dell G3电脑。

    css设置文字竖着排列的方法:

    1、writing-mode(设置对象书写方向)

      语法:writing-mode : lr-tb、tb-rl

      参数:lr-tb:从左向右,从上往下  tb-rl:从上往下,从右向左

      示例:

    css代码:

    div { writing-mode: tb-rl; }

    示例:

    <!DOCTYPE html>    
    <html>    
    <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    
    <title>竖列排版实例</title>    
    <style>    
    div { writing-mode: tb-rl; }  
    </style>    
    </head>    
    <body>   
    <div>我是竖列排版</div>   
    </body>    
    </html>

    效果图:

    13f3f38648f42d99d0e4e28d3495295.png

    2、通常普通的排版思路:对文字对象宽度设置只能排下一个文字的宽度距离,让文字一行排不下两个文字使其文字自动换行,就形成了竖立排版需求。

    <!DOCTYPE html>    
    <html>    
    <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    
    <title>竖列排版实例</title>    
    <style>    
    body{text-align:center}    
    .shuli{ margin:0 auto;width:20px;line-height:24px;border:1px solid #333}    
    </style>    
    </head>    
    <body>   
    <div class="shuli">我是竖列排版</div>   
    </body>    
    </html>

    效果图:

    cdaf661ca0d920cd6216efb3f9272f7.png

    推荐:《css视频教程

    以上就是css怎么让div文字竖着的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css
    上一篇:css的选择器不包括什么 下一篇:css怎么去除table的间隙
    第15期线上培训班

    相关文章推荐

    • 用css实现div里面的文字靠右• css怎么改字体粗细• css行级元素和块级元素之间怎么转换• 请问css的作用是什么• css具备什么特点

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网