css怎么让div文字竖着

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>
    

效果图：

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>
    

效果图：

推荐：《css视频教程》

以上就是css怎么让div文字竖着的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！