div+css文章段落怎么竖排显示？_大段文字在div中竖向划动-优快云博客

显示效果

可以自动换行怎么做

html code

<div class= "text" >
<ul class= "tb-rl" >
               <li class= "test" >
                       <h3>这里是文字标题 </h3>
                       本段文字将按照垂直从右到左的书写方向进行流动。
                 </li>
                  <li class= "test" >
                     <h3>这里是文字标题 </h3>
                      本段文字将按照垂直从右到左的书写方向进行流动。
                 </li>
          </ul>
</div>

css code

*{padding:0; margin:0;}
ul{margin-top:20px;}
li{width:200px; height:300px; border-right:2px solid #f00; list-style: none}
li h3{line-height:30px; font-size:16px;}
.tb-rl{-webkit-writing-mode:vertical-rl;writing-mode:tb-rl;writing-mode:vertical-rl;}

1.在CSS中，哪个属性使得文本竖排显示？
「writing-mode」设置文本的书写方式，它的取值有： lr-tb （从左到右，从上到下）， tb-rl（从右到左，从上到下）等等。在这里，我们将使用tb-rl（从上到下，从右到左）。
考虑到浏览器兼容问题，我们更常用的是「-webkit-writing-mode」这个属性。它的取值有：horizontal-tb（从左到右，从上到下），vertical-rl（从上到下，从右到左），以及vertical-lr（从上到下，从左到右）。在这里，我们将使用vertical-rl。

2. 一个例子

2.1分析例图

如上图。 div>ul>li*2>h1.

2.2 html code

<div class= "course" >
       <ul class= "intro" >
<li class= "tb-rl" >
                       <h1>课程简介>> </h1>
                           本课程把中国传统作为一个整体加以观照，探讨传统中国的社会、政治以及文化生
                           活同中国传统哲学之间的关系，从文化的观念……【详细内容】
                  </li>
   <li class= "tb-rl" >
                        <h1>课程负责人>> </h1>
   李老师，博士，某著名师范大学老师，从事国学教育和培训多年，
                         经验极为丰富……【详细内容】
   </li>
        </ul>
</div>

2.3 css code

* { padding : 0 ; margin : 0 ; }
body { background-color : #180000 ; color : #ffffff ; }
.intro {
   - webkit - writing - mode : vertical - rl ;
    writing - mode : tb - rl ;
     margin : auto ;
     margin-top : 50px ;
     width : 370px ;
   height : 270px ;
}
.tb-rl { list-style : none ; margin-left : 50px ; line-height : 25px ; }
h1 { font-size : 20px ; margin-left : 10px ; padding-right : 5px ; border-right : 2px solid #ffffff ; height : 150px ; }

效果

作者：曾能轩
链接：http://www.zhihu.com/question/37423363/answer/75647013
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。